1

我正在使用淘汰赛的组件(通过 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">

这一切都很好,但是当我尝试将 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;
});

代替:

工作登录

我得到:

无法登录

有什么建议么?

4

1 回答 1

2

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

使用 requireJS 加载淘汰组件视图模型的问题中找到解决方案

于 2015-10-25T22:46:42.270 回答