视图模型已经变得相当大,我想把它分成不同的文件。下面是我想使用的结构:
|- 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);
})
Model.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视图模型时,它只是空的。这是你不能移出并注入到ViewModel中的东西吗?如果不是,为什么?
我认为bert的评论是对的。以下是我看到的两个问题:
第一个问题:字段。属性是一个ko。可观察对象,它不会返回一个ko.observable。通过调用field. property (someValue),您正在设置字段。属性的可观察对象赋予一个新值,每次调用它。另一种说法是,ko。在野外可观察到。财产只存在于一个地方;作为场的一个性质。从viewModel中调用它并不会使它成为viewModel的属性。
第二个问题:even if字段。属性将返回一个新的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'));
不同的方法
稍微修改一下你的代码,你可以把你的模型(或模块)写在它们自己的文件中,并把它们嵌套到一个父视图模型中,使你庞大的视图模型更易于管理。下面是一个对我来说很有效的模式的简化:
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;
});
parentModel.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;
});
main.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>
我希望这对你有帮助!