Durandal小部件不会在父视图模型中更新值
问题描述:
我正在使用带有可观察插件的Durandal来启用ES5获取器和设置器。我创建了一个简单的小工具,需要一个值,并将其绑定到一个文本框:Durandal小部件不会在父视图模型中更新值
这里的小部件的viewmodel.js:
define([], function() {
var ctor = function() {
this.activate = function (settings) {
this.value = settings.value;
}
};
return ctor;
});
而这里的小部件的view.html:
<span>
This textbox is in the widget:
<br />
<input type="text" data-bind="value: value" />
</span>
当使用小部件时,如果该值作为ko.observable传入,那么一切都按预期工作。但是,如果我使用observable插件提供的ES5 getter/setter方法,那么修改小部件中的值不会导致更新父视图模型。修改父视图中的值不虽然更新窗口小部件:
define(['durandal/app', 'knockout'], function (app, ko) {
var ctor = function() {
this.value = ko.observable('Test'); // This works as expected
this.value = 'Test'; // This does not work
};
return ctor;
});
这里的父视图:
<section>
<h1>Widget Test</h1>
This textbox is not in the widget:
<br />
<input type="text" data-bind="value: value" />
<br /><br />
<div data-bind="widget: { kind: 'testWidget', value: value }"></div>
</section>
难道我做错了什么,导致无法被推回父视图中的价值模型?
答
您将不得不定义/使用observable属性来使其双向绑定,以便在视图中进行的更改将反映在您的视图模型中。
this.value = ko.observable('Test');适合您的要求。