Question

我正在使用knockout 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来加载视图模型，则它不起作用。无需用户单击“添加”链接即可立即显示“测试”文本。视图模型上的可观察对象以某种方式搞砸了。

这是脚本文件内容（注意视图模型是相同的）：

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。当视图模型在寄存器函数中硬编码时，它返回true。当我使用requireJS加载视图模型时，它返回false。

关于我在这里做错了什么想法？

Answer 1

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

您的ko.components.register行是否包含在requirejs模块中？

我怀疑您在knockout.js文件之前加载了javascript文件require.js，然后您访问全局ko变量来执行ko.components.register这是一个不同的ko对象来自require.js加载的那个。

使用requireJS发出加载knockout组件视图模型

1 个答案: