使用requireJS发布加载的剔除组件视图模型 [英] Issue loading knockout components view model using requireJS

问题描述

我正在使用敲除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' }
});

在调试问题时，我在敲除3.2.0版的resolveViewModel函数中添加了一项检查.调用新的viewModelConfig(params)之后，我检查对象上是否可观察到正在添加".当视图模型在register函数中进行硬编码时，它返回true.当我使用requireJS加载视图模型时，它返回false.

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

解决方案

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

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

我怀疑您在require.js文件之前加载了javascript文件knockout.js，然后访问全局ko变量来执行ko.components.register，该变量与require.js加载的对象不同.ko.components.register /p>

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.

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

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

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);
             }
        }
 });

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' }
});

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]

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

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屋！