[英]Knockout Observable Array Length always 0
在customerOverview视图模型中调用任何observable的长度时,我会收到零长度。 随着绑定随数据更新,可观察数据中存在数据,但长度保持为0.基本视图模型'CustomerCentral'正确返回长度。 我需要'CustomerOverview'中一些observable的长度来做一些条件语句。
<ul class="nav nav-list">
<li class="nav-header">Contacts</li>
<!--ko if: customerOverview.contacts().length == 0-->
<li>No contacts associated with this customer</li>
<!-- /ko -->
<!--ko foreach: customerOverview.contacts()-->
<li>
<a data-bind="click: $root.customerOverview.viewContact"><i class="icon-chevron- right single pull-right">
</i><span data-bind="text: FirstName"></span><span data-bind="text: LastName"></span>
</a></li>
<!-- /ko -->
</ul>
function CustomerOverview() {
var self = this;
self.contacts = ko.observableArray([]);
self.getCustomerContacts = function () {
requestController = "/CRM/CustomerCentral/CustomerContacts";
queryString = "?id=" + self.customer().Id();
$.ajax({
cache: false,
type: "GET",
dataType: "json",
url: baseURL + requestController + queryString,
headers: { "AuthToken": cookie },
success:
function (data) {
if (data.data.length > 0) {
self.contacts(ko.mapping.fromJS(data.data));
console.log(self.contacts().length);
}
}
});
};
};
function CustomerCentral() {
var self = this;
self.customerOverview = ko.observable(new customerOverview());
};
var vm = new CustomerCentral();
ko.applyBindings(vm);
Console cmd:vm.customerOverview()。contacts()。length 0
---------------------------解决方案---------------------- observableArray.push()
问题结果是这一行:
self.contacts(ko.mapping.fromJS(data.data));
解决方案:在此处添加.push()可以使数组的length属性递增。 我曾假设ko.mapping会处理这个问题,但事实并非如此。 将变量更改为observable无效。
$.each(data.data, function () {
self.contacts.push(ko.mapping.fromJS(this));
console.log(self.contacts().length);
});
我认为您的问题是没有将您的customerOverview
属性视为可观察的
尝试:
self.customerOverview = ko.observable(new CustomerOverview());
要么
self.customerOverview = ko.computed(function(){
return new CustomerOverview();
});
工作样本:
http://jsfiddle.net/dvdrom000/RHhmY/1/
<span data-bind="text: customerOverview().contacts().length"></span>
<button data-bind="click: customerOverview().getCustomerContacts">Get contacts</button>
function CustomerOverview() {
var self = this;
self.contacts = ko.observableArray([]);
self.getCustomerContacts = function () {
self.contacts.push(1);
self.contacts.push(2);
self.contacts.push(3);
};
};
function CustomerCentral() {
var self = this;
// Is this a correct way. Am I breaking something with this?
self.customerOverview = ko.observable(new CustomerOverview());
};
var vm = new CustomerCentral();
ko.applyBindings(vm);
问题结果是这一行:
self.contacts(ko.mapping.fromJS(data.data));
解决方案:在此处添加.push()可以使数组的length属性递增。 我曾假设ko.mapping会处理这个问题,但事实并非如此。 将变量更改为observable无效。
$.each(data.data, function () {
self.contacts.push(ko.mapping.fromJS(this));
console.log(self.contacts().length);
});
Knockout为数组提供了一组操作函数,用于镜像JavaScript中的函数; pop,push,shift,unshift,reverse,sort和splice。 除了执行您期望的操作外,这些数组函数还将自动通知任何观察者数组已更改。 JavaScript方法不会。 如果您希望在数组计数发生变化时更新UI,您需要小心使用Knockout函数。
参考: http : //ryanrahlf.com/knockout-js-observablearray-not-updating-the-ui-heres-how-to-fix-it/
基本上,要解决您的问题,您只需要在可观察数组上直接使用knockout push函数,而不是使用javascript push方法。 因此:
改变这个:
self.contacts( ).push( data.data );
这样:
self.contacts.push( data.data );
并且您将能够在html上使用contacts()。length属性,并在数组中的每个更改时得到通知。
我有这样的问题和IIRC,这是因为我在评论条件中使用了双等号(==)而不是三等号(===)。 试一试。
代替:
self.contacts(ko.mapping.fromJS(data.data));
你应该有:
self.contacts(ko.mapping.fromJS(data.data)**()**);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.