ASP.NET MVC 5，Knockout.js和映射：正确的方法吗？

Question

有关ASP.NET MVC，Knockout.js和映射插件的问题比比皆是。 我有下面的示例（非常简单的“入门”），它可以正常工作。 但是，我想反馈一下这是否是推荐的方法。 首先，我对将来的模型变得更加复杂（子级，下拉菜单等）感兴趣。 我觉得维护两组模型是没有道理的，因此我想使用映射插件。

PS：我不介意提交表单，但是由于所有不同的问题，我无法使它生效，这显然与ko.utils.postJSON用引号引起来的字符串值的URL编码有关。 任何更新，也将不胜感激。

HTML

<h2>Simple View</h2>
<p>A simple model with 2 properties</p>
<p>Model property "Name": <span data-bind="text: Name"></span></p>
<p>Model property "Count" (just some integer): <span data-bind="text: Count"></span></p>
<form data-bind="submit: save">
    <h3>Editing</h3>
    <p>Name: <input type="text" data-bind="value: Name" /></p>
    <p>Count: <input type="text" data-bind="value: Count" /></p>
    <h3>Posting Back</h3>
    <button type="submit">Update</button>
</form>

JavaScript的

<script type="text/javascript">
    var KoViewModel;
    $(function () {
        KoViewModel = ko.mapping.fromJSON('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))');
        ko.applyBindings(KoViewModel);
    });
    var save = function () {
        $.ajax({
            url: location.href,
            type: 'POST',
            data: ko.mapping.toJSON(KoViewModel),
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                ko.mapping.fromJSON(data, KoViewModel);
            }
        });
    }
</script>

服务器端

public ActionResult Index()
{
    Models.SimpleModel m = new Models.SimpleModel();

    m.Name = "Some name";
    m.Count = 1;

    return View(m);
}

[HttpPost]
public JsonResult Index(Models.SimpleModel fc)
{
    fc.Name += " (updated)";
    fc.Count++;
    return (new JsonResult() { Data = Newtonsoft.Json.JsonConvert.SerializeObject(fc) });
}

感谢您的任何见解！

Answer 1

我会以不同的方式构造脚本。

function SimpleModel(data) {
    var self = this;

    // data
    self.Name = ko.observable();
    self.Count = ko.observable();

    // api
    self.load = function (data) {
        if (data) ko.mapping.fromJSON(data, {}, self);
    };
    self.save = function () {
        return $.ajax({
            type: 'POST',
            url: location.href,
            data: ko.mapping.toJSON(self),
            contentType: 'application/json; charset=utf-8',
        }).done(self.load);
    };

    // init
    self.load(data);
}

// later... -------------------------------------------------------------------------
$(function () {
    var data = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))';
    ko.applyBindings( new SimpleModel(data) );
});

好处：

• 视图模型的所有数据属性均已明确定义。 这有助于减少错误，因为视图模型的外观立即显而易见。 这也有助于减少运行时错误，因为即使JSON输入中缺少属性，属性也将存在。 这样，视图可以始终绑定而没有任何问题。
• 您可以将视图模型移动到单独的脚本文件。
• viewmodel可以根据传递给构造函数的数据进行初始化。 如果您重构应用程序，这将非常有用-例如，当您的视图模型突然成为更大的视图模型的一部分时。
• 无需笨拙地引用全局变量或单独的辅助函数，该视图模型是独立的。

• 从save方法返回Ajax承诺，使您可以附加行为，而无需重新连接viewmodel：

   var vm = new SimpleModel(data); // programmatically save the model vm.save().done(function () { // whatever localStorage.setItem('lastAutoSave', Date.now()); });