4

我正在使用淘汰赛 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。

关于我在这里做错了什么的任何想法?

4

1 回答 1

3

[从评论中复制作为避免混淆的答案]

您的ko.components.register线路是否包含在 requirejs 模块中?

knockout.js我怀疑您在文件之前加载javascript 文件require.js,然后您访问全局ko变量来执行ko.components.register与.korequire.js

于 2014-11-18T03:28:05.430 回答