Knockout.js：組件ViewModel中的本地可觀察對象

Question

我正在使用敲除組件（通過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代碼段：

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

一切正常，但是當我嘗試將可觀察對象移動到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;
});

代替：

我得到：

有什么建議么？

Answer 1

我正在全局加載淘汰賽和require.js，然后在使用require加載視圖模型時，這又在加載另一個淘汰賽實例。 我刪除了不需要的敲除參考，一切都開始按我期望的那樣工作。

在使用IssueJS的問題加載敲除組件視圖模型中找到解決方案