knockout.js - 将 knockoutjs 分离到单独的文件中，并使用 requirejs 注入(inject)内容

Question

View 模型变得相当大，我想将它分成不同的文件。这是我要使用的结构:

 |- knockout-2.2.0.debug.js
 |- require.js
 |- /App
    |- Property.js
    |- /Property
       |- Fields.js
       |- Model.js
       |- ViewModel.js

现在在我的 Property.js 文件中我有:

require.config({
    paths: {
        ko: "../knockout-2.2.0.debug"
    },
    baseUrl: "/Scripts/App"
})

require(['ko', 'Property/ViewModel'], function (ko, viewModel) {
    var view = new viewModel.PropertyViewModel();
    console.log(view);
    ko.applyBindings(view);

})

模型.js

define(['ko'], function(ko) {

    return {
        PropertyModel: function(id, name, note) {
            var s = this;
            s.Id = ko.observable(id);
            s.Name = ko.observable(name);
            s.Note = ko.observable(note);
        }
    };
});

现在这就是我卡住的地方，如果我的 ViewModel 中有这个:

define(['ko', 'Property/Model', 'Property/Field'], function(ko, model, field) {
    return {
        PropertyViewModel: function () {
            var self = this;

            self.Property = ko.observable(new model.PropertyModel("123", "Test", "note"));
        }
    };
});

它工作完美，但我真的想将我使用的字段(self.Property 等)移动到一个单独的文件中，所以在我的 Field.Js 文件中我有以下内容:

define(['ko'], function(ko) {
    return {
        Property: ko.observable()
    };
});

并更新以下行:

self.Property = ko.observable(new model.PropertyModel("123", "Test", "note"));

到

field.Property(new model.PropertyModel("123", "Test", "Note"))

但是当我尝试 console.log View 模型时，它只是空的。这是您不能移出并注入(inject)到 ViewModel 中的东西吗？如果不是，为什么？

Answer 1

我认为伯特在他的评论中是正确的。这是我看到的两个问题:

第一个问题:field.Property 是一个 ko.observable，它不会返回一个 ko.observable。通过调用 field.Property(someValue) ，您可以在每次调用时将 field.Property observable 设置为一个新值。换句话说， ko.observable at field.Property 只存在于一个地方；作为字段的属性。从 viewModel 调用它不会使其成为 viewModel 的属性。

第二个问题:即使field.Property每次都返回一个新的ko.observable，比如

define(['ko'], function(ko) {
    return {
        Property: function() { return ko.observable(); }
    };
});

并且您将调用修改为

//Note the extra parens
field.Property()(new model.PropertyModel('123','Test','Note'));

您仍然没有将该返回值(新的 ko.observable)分配给 viewModel。你必须做类似的事情:

self.myProperty = field.Property()(new model.PropertyModel('123', 'Test','Note'));

它的可读性不如简单的

self.myProperty = ko.observable(new model.PropertyModel('123', 'Test', 'Note'));

不同的方法

通过对代码稍作修改，您可以将模型(或模块)分别写入自己的文件中，并将它们嵌套到一个父 viewModel 中，从而使您的大型 View 模型更易于管理。以下是对我来说效果很好的模式的简化:

childModel.js

define(['ko'], function(ko){
    var childModel = function(data){
        var self = this;

        self.myProperty = ko.observable(data.firstValue);
        self.myOtherProperty = ko.observable(data.secondValue);
    };

    return childModel;
});

父模型.js

define(['ko', 'childModel'], function(ko, childModel){
    var parentModel = function(){
        var self = this;

        self.childOne = new childModel({firstValue: 'Test', secondValue: '123'});
        self.childTwo = new childModel({firstValue: 'Two', secondValue: '456'});
    };

    return parentModel;
});

主要.js

requre(['ko','parentModel'], function(ko, parentModel){
    var parent = new parentModel();

    ko.applyBindings(parent);
});

html

<div>
    <!-- ko with : childOne -->
        <span data-bind="text: myProperty"></span>
        <span data-bind="text: myOtherProperty"></span>
    <!-- /ko -->
    <!-- ko with : childTwo -->
        <span data-bind="text: myProperty"></span>
        <span data-bind="text: myOtherProperty"></span>
    <!-- /ko -->    
</div>

希望对您有所帮助!