Knockout.js:组件 ViewModel 中的本地 Observable
Knockout.js: Local Observables within Component ViewModel
我正在使用 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 片段:
<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;
});
而不是:
我得到:
有什么建议吗?
我正在全局加载 knockout 和 require.js,然后使用 require 加载视图模型,这正在加载另一个 knockout 实例。我删除了对 knockout 的非必需引用,一切都开始按照我期望的方式工作。
在 Issue loading knockout components view model using requireJS
找到解决方案
我正在使用 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 片段:
<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;
});
而不是:
我得到:
有什么建议吗?
我正在全局加载 knockout 和 require.js,然后使用 require 加载视图模型,这正在加载另一个 knockout 实例。我删除了对 knockout 的非必需引用,一切都开始按照我期望的方式工作。
在 Issue loading knockout components view model using requireJS
找到解决方案