基于Lambda表达式的基于属性的帮助程序，用于数据绑定，以将Knockout.js与MVC4 / 5 + Razor集成

Question

I just tried KnockoutMvc and while I admire the creator's effort, I find it is a little too heavy-handed to be useful in general. However I like to minimize the amount of JavaScript in my Razor views, especially boilerplate JavaScript (like binding my serverside view models to clientside view models).

Is there any library out there that allows you to use syntax like:

<span data-bind="@Html.DataBindFor(m => m.MyProperty)"></span>

Alternatively, if I were to go about trying to write my own, approximately what (very general) components would I need to make the library useful? I am assuming at a minimum I would need:

1. A custom set of attributes for defining how each model / property / method would be bound
2. An extension method for use in Razor views to use reflection to find out the attribute values
3. An extension method for use in Razor to generate the (minimal?) JavaScript to bind the client view model to the Razor Model and functions to call the server while necessary

Finally, assuming this library doesn't exist, is there a good reason it doesn't exist? IE is there no way to really work this problem in generality such that a helper method is, uh, helpful?

The reason I ask is because the library Lib.Web.Mvc.JqGrid has helped me create interactive tables really quickly with absolutely minimal amounts of JavaScript (just enough to format columns and such) and I wonder why the same does not exist for knockout.js .

Answer 1

The get rid of manually translating the server-side models to the client-side view models, you can employ the ko.mapping plugin which is then used like this:

@model ViewModel

<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>

...

<script type="text/javascript">
    function ViewModel(initData) {
        var self = this;
        ko.mapping.fromJS(initData, {}, self);

        // Add custom view model logic
        ...

        // Logic for persisting the current state of the model back to the server
        self.Save = function() {                
            $.ajax('/model-uri', {
              type: 'POST',
              contentType: "application/json",
              data: ko.toJSON(self),
              success: function (response) {
                  alert('Success!');
              },
              error: function(xhr, status, error) {
                  alert('Error: ' + xhr.responseText);
              }              
         });
    };

    var initialData = @(Html.Raw(JsonConvert.SerializeObject(Model)));
    var model = new ViewModel(initialData);
    ko.applyBindings(model);
</script>

Note that we're serializing the server-provided view model to a JavaScript object and then making its properties observable using the ko.mapping plugin which saves us duplicating the view model definition on the client side. We also employ the ko.toJSON utility function when sending the updated model back to the server.

The mapping procedure can be customized to ignore certain properties:

var mapping = {
    'ignore': ["propertyToIgnore", "alsoIgnoreThis"]
}

ko.mapping.fromJS(data, mapping, self);

There are more mapping customizations available, described on the plugin page .