Question

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

以下是我系统中非常常见的骨架/示例，因此我需要知道如何使用 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

我在这里实际上是非常愚蠢的;忘了告诉淘汰什么要绑定..在这种情况下，“价值”。因此，工作示例如下：

<强> 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标准？

1 个答案: