使用 requireJS 加载淘汰组件视图模型 [英] Issue loading knockout components view model using requireJS

问题描述

我正在使用淘汰赛 3.2 的新组件功能，并尝试使用 requireJS 加载组件.但是，我遇到了一个奇怪的问题.基本上，当我在注册函数中对视图模型进行硬编码时，一切正常.当我尝试使用 requireJS 加载完全相同的视图模型时，它无法正常工作.

I am working with the new components functionality of knockout 3.2 and trying to load the components using requireJS. However, I am having a weird issue. Basically, when I hardcode the view model in the register function everything works fine. When I try to load the exact same view model using requireJS, it's not working correctly.

这是加载组件的 html 示例:

Here's a sample of the html to load the component:

<div data-bind="component: { name: 'test'}"></div>

这是该组件将加载的模板中的 html:

Here's the html in the template that this component will load:

<a href="#" data-bind="click: addNew">add</a>
<span data-bind="visible: Adding">test</span>

当我编写如下所示的注册函数时，一切都按预期工作(这意味着当它被加载时，测试"文本在用户点击添加"链接之前不会显示):

When I write my register function as shown below, everything works as expected (meaning that when this gets loaded, the "test" text does not show until the user clicks the "add" link):

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 加载视图模型，则它不起作用.测试"文本立即显示，用户无需单击添加"链接.视图模型上的 observable 不知何故变得一团糟.

But if I try to change this to use requireJS to load the view model, it doesn't work. The "test" text displays immediately without the user clicking the "add" link. The observables on the view model are getting messed up somehow.

这是脚本文件的内容(注意视图模型是一样的):

Here's the script file contents (note the view model is the same):

define(["knockout"], function (ko) {

    function viewModel() {  
        var self = this;
        self.Adding = ko.observable(false);

        self.addNew = function () {
            self.Adding(true);
        }
    };

    return viewModel;
});

注册函数现在看起来像这样:

And the register function would now look like this:

ko.components.register('test',
{
    template: { require: 'text!path/theTemplateFromAbove.html' },
    viewModel: { require: 'path/fileForMyTemplate' }
});

在调试问题时，我在knockout-3.2.0的resolveViewModel函数中添加了一个检查.在它调用 new viewModelConfig(params) 之后，我检查添加"是否是对象上的可观察对象.当视图模型在 register 函数中被硬编码时，它返回 true.当我使用 requireJS 加载视图模型时，它返回 false.

While debugging the issue, I added a check in the resolveViewModel function of knockout-3.2.0. After it calls new viewModelConfig(params), I check if "Adding" is an observable on the object. When the view model is hardcoded in the register function, it returns true. When I use requireJS to load the view model, it returns false.

对我在这里做错了什么有任何想法吗?

Any ideas on what I'm doing wrong here?

推荐答案

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

[copied from comment as a answer to avoid confusion]

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

Is your ko.components.register line wrapped inside a requirejs module?

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

I suspect you load javascript file knockout.js before require.js file, and then you access global ko variable to do ko.components.register which is a different ko object from the one loaded by require.js.

这篇关于使用 requireJS 加载淘汰组件视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！