[英]Knockout computed binding not updating the template name
I'm shifting to Knockout from JQuery bindings to make UI synchronization with data easier. 我正在从JQuery绑定转移到Knockout,以简化与数据的UI同步。 I am fairly new to knockout but to keep things tidy I'm using knockout with Requirejs. 我是淘汰赛的新手,但为了保持整洁,我在Requirejs中使用淘汰赛。
So in one of my modules I tried to use templates to change the information bar and bound the template name to a computed observable. 因此,在我的一个模块中,我尝试使用模板来更改信息栏,并将模板名称绑定到计算得到的可观察对象。 But the computed observable is not updating the template name in the UI. 但是计算得出的可观察值不会更新UI中的模板名称。
<div data-bind="template: { name: baseData.printListTemplate }"></div>
<script type="text/html" id="inPrintList">
<span>
<span>In </span>
<a href="#" class="managePrintList">Print List</a>
</span>
<a href="#" data-bind="click: switchInPrintList">sw</a>
</script>
<script type="text/html" id="notInPrintList">
<span>
<span>Add to </span>
<a href="#" class="managePrintList">Print List</a>
</span>
<a href="#" data-bind="click: switchInPrintList">sw</a>
</script>
Above is my html code and Knockout templates. 上面是我的html代码和Knockout模板。
Following code is my Knockout module 以下代码是我的淘汰赛模块
Inside the baseData I have printListTemplate computed observable returning the templatename to use for print list indicator. 在baseData内部,我计算出了可观察到的printListTemplate,返回了用于打印列表指示符的模板名称。
switchInPrintList changes the inPrintList observable and after the change ko.computed function runs and it returns the correct string but the UI is not updated after these. switchInPrintList更改可观察的inPrintList,并且在运行更改ko.computed函数并返回正确的字符串之后,但在这些之后UI不会更新。
define(['knockout', 'Modules/utils', 'Modules/Shared/kodialog'],
function (ko, utils, kodialog) {
var baseData = function (data) {
var self = this;
self.inPrintList = ko.observable(false);
ko.mapping.fromJS(data, {}, self);
self.printListTemplate = ko.computed(function () {
if (self.inPrintList())
return "inPrintList";
else
return "notInPrintList";
}, this);
}
var baseDataMapping = {
create: function (options) {
return new baseData(options.data);
}
}
return function player() {
var self = this;
var utils = new utils();
self.baseData = new baseData();
self.dialog = new kodialog();
self.renderMP = function (contentId) {
self.dialog.openDialog();
$.ajax({
type: "GET",
url: "/Home/mpdata",
dataType: 'json',
crossDomain: true,
data: { contentid: contentId },
success: function (jsonResult) {
self.baseData = ko.mapping.fromJS(jsonResult, baseDataMapping);
self.dialog.rendered(true);
}
});
}
self.switchInPrintList = function () {
if (self.baseData.inPrintList())
self.baseData.inPrintList(false);
else
self.baseData.inPrintList(true);
}
}
});
I think the problem is that you're reassigning baseData
in your success callback, when you need only to update it's properties accordingly. 我认为问题在于您仅在需要相应更新其属性时才在成功回调中重新分配baseData
。 For this case there is another overload of ko.mapping.fromJS()
method, which takes the third parameter as update target which properties should be updated. 对于这种情况, ko.mapping.fromJS()
方法还有另一个重载,该方法将第三个参数作为更新目标,应更新哪些属性。 See documentation , "specifying update target". 请参阅文档 “指定更新目标”。
So try to rewrite your success callback like this: 因此,尝试像这样重写您的成功回调:
success: function (jsonResult) {
ko.mapping.fromJS(jsonResult, baseDataMapping, self.baseData);
self.dialog.rendered(true);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.