0

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; }
    }
2
  • I'm also thinking about dropping the form tag and just using div's and links.
    – user441521
    Commented Jun 13, 2014 at 12:58
  • "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". As a KO fan I have to say best of luck... KnockOut is the best in the observables game. You have some functionality in BackBone.js, and there is Angular.js (framework), and HTML5 drafts include a native observable specification.
    – MattSizzle
    Commented Jun 28, 2015 at 17:09

1 Answer 1

3

Check out TodoMVC. There you'll find a few dozens of modern JS frameworks with an easy to evaluate code sample.

Picking any of them should be far easier than rolling your own solution. I know the temptation is great. Been there, done that. But on your own you cannot beat thousands of man-hours that went into developing a solid framework.

2
  • I agree, but I'm just wondering if my idea above has already been done. I guess I'll have to weed through all of these to see if they meet the idea I'm doing. It's not really the high level idea I'm talking about but the implementation of the high level.
    – user441521
    Commented Jun 13, 2014 at 14:00
  • See as I dig into these I'm finding that they don't all seem to meet the criteria of being decoupled from any sort of back-end (by ONLY using valid HTML with no extra stuff) or being very minimal javascript to get things bound.
    – user441521
    Commented Jun 13, 2014 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.