我正在使用淘汰赛 3.2 的新组件功能并尝试使用 requireJS 加载组件。但是,我有一个奇怪的问题。基本上,当我在注册函数中对视图模型进行硬编码时,一切正常。当我尝试使用 requireJS 加载完全相同的视图模型时,它无法正常工作。
这是加载组件的 html 示例:
<div data-bind="component: { name: 'test'}"></div>
这是该组件将加载的模板中的 html:
<a href="#" data-bind="click: addNew">add</a>
<span data-bind="visible: Adding">test</span>
当我编写如下所示的注册函数时,一切都按预期工作(这意味着当它被加载时,在用户单击“添加”链接之前,“测试”文本不会显示):
ko.components.register('test',
{
template: { require: 'text!path/theTemplateFromAbove.html' },
viewModel:
function() {
var self = this;
self.Adding = ko.observable(false);
self.addNew = function() {
self.Adding(true);
}
}
});
但是,如果我尝试将其更改为使用 requireJS 来加载视图模型,它就不起作用了。“测试”文本会立即显示,无需用户单击“添加”链接。视图模型上的 observables 不知何故搞砸了。
这是脚本文件的内容(注意视图模型是相同的):
define(["knockout"], function (ko) {
function viewModel() {
var self = this;
self.Adding = ko.observable(false);
self.addNew = function () {
self.Adding(true);
}
};
return viewModel;
});
注册函数现在看起来像这样:
ko.components.register('test',
{
template: { require: 'text!path/theTemplateFromAbove.html' },
viewModel: { require: 'path/fileForMyTemplate' }
});
在调试问题时,我在 knockout-3.2.0 的 resolveViewModel 函数中添加了检查。在它调用 new viewModelConfig(params) 之后,我检查“Adding”是否是对象上的一个 observable。当视图模型在 register 函数中被硬编码时,它返回 true。当我使用 requireJS 加载视图模型时,它返回 false。
关于我在这里做错了什么的任何想法?