I’m using MVC but I’ve read that MVVM is sort of about data binding and having pure markup in your views that data bind back to the backend via the data-* attributes. I’ve looked at knockout but it looks pretty low level and I feel like I can make a library that does this and is much easier to use where basically you only need to call 1 javascript function that will data bind your entire page because of the data-* attributes you assign to html elements.

The benefits of this (that I see) is that your view is 100% decoupled from your back-end so that a given view never has to be changed if your back-end changes (ie for asp.net people no more razor in your view that makes your view specific to MS).

My question would be, I know there is knockout out there but are there any others that provide this data binding functionality for MVC type applications? I don’t want to recreate something that may already exist but I want to make something “better” and easier to use than knockout.

To give an example of what I mean here is all the code one would need to get data binding in my library. This isn’t final but just showing the idea that all you have to do is call 1 javascript function and set some data-* attribute values and everything ties together. Is this worth seeing through?

    <script>
        $(function () {

            // this is all you have to call to make databinding for POST or GET to work
            DataBind();
        });
    </script>


<form id="addCustomer" data-bind="Customer" data-controller="Home" data-action="CreateCustomer">
    Name: <input type="text" data-bind="Name" data-bind-type="text" />
    Birthday: <input type="text" data-bind="Birthday" data-bind-type="text" />
    Address: <input type="text" data-bind="Address" data-bind-type="text" />
    <input type="submit" value="Save" id="btnSave" />
</form>

=================================================

// controller action
[HttpPost]
        public string CreateCustomer(Customer customer)
        {
            if(customer.Name == "Rick")
                return "success";

            return "failure";
        }

// model
public class Customer
    {
        public string Name { get; set; }
        public DateTime Birthday { get; set; }
        public string Address { get; set; }
    }