我怎样才能将这个淘汰赛视图模型转换为符合 Durandal 标准？

Question

我有一个基于 KnockoutJS 的系统，我现在正尝试利用 Durandal。我已经想出如何使 MVC 路由与它很好地配合使用，所以现在在这方面我感到很自在。但是，我对视图模型有点困惑。我想困惑在于我对 RequireJS 的无知。我正在寻找的是以下示例视图模型的简单示例：

以下是 skeleton/example 在我的系统中很常见的内容，所以我需要知道如何使用 Durandal 来很好地发挥它：

var SomeModelA = function () {
    var self = this;

    self.id = ko.observable(0);
    self.name = ko.observable(null);
    //etc

    self.create = function () {
        //etc
    };

    self.edit = function (id) {
        //etc
    };

    self.delete = function (id) {
        //etc
    };

    self.save = function () {
        //etc
    };

    self.cancel = function () {
        //etc
    };
};

var SomeModelB = function () {
    var self = this;

    self.id = ko.observable(0);
    self.name = ko.observable(null);
    //etc

    self.create = function () {
        //etc
    };

    self.edit = function (id) {
        //etc
    };

    self.delete = function (id) {
        //etc
    };

    self.save = function () {
        //etc
    };

    self.cancel = function () {
        //etc
    };
};

var ViewModel = function () {
    var self = this;

    self.someModelA = new SomeModelA();
    self.someModelB = new SomeModelB();
};

var viewModel;
$(document).ready(function () {
    viewModel = new ViewModel();
    ko.applyBindings(viewModel);

    $("#GridA").kendoGrid({
        //etc
    });
    $("#GridB").kendoGrid({
        //etc
    });
});

我只需要一个基于上述内容的非常基本的示例。

在任何人提及之前；是的，我知道 Aurelia - 它很棒，我将在新项目中使用它...但是我当前的系统正在大量使用 Knockout 因此，现在选择 Durandal 是有意义的……无论如何，这可能会成为以后通往 Aurelia 的垫脚石。

编辑

请注意，我尝试了以下方法但没有成功：

JS:

var SomeModelA = function () {
    var self = this;
    self.name = ko.observable(null);
};
var SomeModelB = function () {
    var self = this;
    self.name = ko.observable(null);
};

define(['knockout'], function (ko) {
    return function () {
        var self = this;
        self.modelA = new SomeModelA(),
        self.modelB = new SomeModelB(),

        self.showA = function () {
            alert(this.modelA.name());
        },
        self.showB = function () {
            alert(this.modelB.name());
        }
    };
});

标记：

<section>
    @Html.TextBox("NameA", null, new { @class = "form-control", data_bind = "modelA.name" })
    @Html.TextBox("NameB", null, new { @class = "form-control", data_bind = "modelB.name" })

    <button type="button" data-bind="click: showA" class="btn btn-default">Show A</button>
    <button type="button" data-bind="click: showB" class="btn btn-default">Show B</button>
</section>

上面好像没有正确绑定数据。当我更改文本框中的某些内容，然后单击按钮时，我可以看到值仍显示为 "NULL"。我在这里错过了什么？

Answer 1

实际上我在这里很愚蠢；忘记告诉 knockout 要绑定什么。在这种情况下，"value"。因此，工作示例如下：

JS:

define(['knockout'], function (ko) {
    var SomeModelA = function () {
        var self = this;
        self.name = ko.observable('testA');
    };
    var SomeModelB = function () {
        var self = this;
        self.name = ko.observable('testB');
    };

    var vm = {
        modelA: new SomeModelA(),
        modelB: new SomeModelB(),

        showA: function () {
            alert(this.modelA.name());
        },
        showB: function () {
            alert(this.modelB.name());
        }
    };
    return vm;
});

标记：

<section>
    @Html.TextBox("NameA", null, new { @class = "form-control", data_bind = "value: modelA.name" })
    @Html.TextBox("NameB", null, new { @class = "form-control", data_bind = "value: modelB.name" })

    <button type="button" data-bind="click: showA" class="btn btn-default">Show A</button>
    <button type="button" data-bind="click: showB" class="btn btn-default">Show B</button>
</section>

我怎样才能将这个淘汰赛视图模型转换为符合 Durandal 标准？

How can I convert this knockout view model to be Durandal compliant?

asp.net-mvc

knockout.js

asp.net-mvc-5

durandal

durandal-2.0