Knockout.js：组件 ViewModel 中的本地 Observables答案

【问题标题】：Knockout.js: Local Observables within Component ViewModelKnockout.js：组件 ViewModel 中的本地 Observables
【发布时间】：2016-01-24 06:47:32
【问题描述】：

我正在使用 knockout 的组件（通过 require.js 加载）来创建登录小部件。

Javascript：

ko.components.register('login-widget', {
    viewModel: { require: '/components/login-widget.js' },
    template: { require: 'text!/components/login-widget.html' }
});

function MyViewModel() {
    var self = this;
    self.email = ko.observable();
    self.password = ko.observable();
    self.mode = ko.observable('login');
}

ko.applyBindings(new MyViewModel());

html

<div class="container-fluid">
    <h1>Hello world</h1>
    <login-widget params="{ email: email, password: password, mode: mode}"></login-widget>
</div>

组件 Javascript

define(['knockout'], function (ko) {
    function LoginWidgetViewModel(params) {
        var self = this;

        self.email = params.email;
        self.password = params.password;

        self.mode = params.mode;
    }
    return LoginWidgetViewModel;
});

组件html sn-p:

 <input type="email" class="form-control" placeholder="email" data-bind="value:email">

这一切都很好，但是当我尝试将 observable 移动到 LoginWidgetViewModel 而不是将它们作为参数传递时，它们没有正确绑定到模型。所以当我使用

define(['knockout'], function (ko) {
    function LoginWidgetViewModel(params) {
        var self = this;

        self.email = ko.observable();
        self.password = ko.observable();

        self.mode = ko.observable('login');
    }
    return LoginWidgetViewModel;
});

代替：

我明白了：

有什么建议吗？

【问题讨论】：

我试图创建一个简化的复制，但 works as expected。也许问题在于 AMD 位，或者可能在于您的实际复制与您发布的内容略有不同，不确定。您能否在我的 jsfiddle 和您的代码之间分叉以追查根本原因并在您的问题中包含相关信息？
附言。根据我的经验，您所看到的通常是由于实际代码是返回可观察对象的函数而不是可观察对象本身。参见例如this contrived jsfiddle。您的实际代码中是否有一些自定义绑定处理程序应该解开可观察对象，但没有？
我添加了一个局部变量，就像我在我的尝试中所做的那样，它起作用了，所以我显然在做一些不同的事情。感谢您的帮助，这可能与我加载内容的方式有关。 jsfiddle.net/y21ztg21
是的，这绝对与我加载它的方式有关。当我通过 require.js 加载视图模型时它会中断，但是当直接在组件中使用视图模型时它可以工作。

标签： knockout.js requirejs knockout-components

【解决方案1】：

我正在全局加载 knockout 和 require.js，然后使用 require 加载视图模型，这正在加载另一个敲除实例。我删除了对淘汰赛的非必需引用，一切都开始按照我期望的方式工作。

在Issue loading knockout components view model using requireJS找到解决方案

【讨论】：

这个让我很伤心！感谢您用答案更新您自己的问题。