9

在 customerOverview 视图模型中调用任何可观察的长度时，我收到的长度为零。当绑定随数据更新时，可观察对象中存在数据，但长度保持为 0。基本视图模型“CustomerCentral”正确返回长度。我需要'CustomerOverview'中一些可观察的长度来做一些条件语句。

HTML 绑定

<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>

JS

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);

控制台 cmd：vm.customerOverview().contacts().length 0

- - - - - - - - - - - - - -解决方案 - - - - - - - - - - - observableArray.push()

问题原来是这一行：

  self.contacts(ko.mapping.fromJS(data.data));

解决方案：添加 .push() 可以增加数组的长度属性。我曾假设 ko.mapping 会处理这个问题，但事实并非如此。将变量更改为 observable 没有效果。

 $.each(data.data, function () {
          self.contacts.push(ko.mapping.fromJS(this));
           console.log(self.contacts().length);
                                    });
4

5 回答 5

6

我认为你的问题是没有你的customerOverview财产是可观察的

尝试：

 self.customerOverview = ko.observable(new CustomerOverview());

或者

 self.customerOverview = ko.computed(function(){
       return new CustomerOverview();
 });

工作样本：

http://jsfiddle.net/dvdrom000/RHhmY/1/

html

<span data-bind="text: customerOverview().contacts().length"></span>
<button data-bind="click: customerOverview().getCustomerContacts">Get contacts</button>

js

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);
于 2013-03-21T18:54:35.337 回答
3

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/

所以基本上，要解决你的问题，你只需要直接在可观察数组上使用敲除推送功能，而不是使用 javascript 推送方法。因此：

改变这个：

self.contacts( ).push( data.data );

这样：

self.contacts.push( data.data );

您将能够在您的 html 上使用 contacts( ).length 属性，并在数组中的每次更改时收到通知。

于 2016-05-17T13:34:06.593 回答
2

observableArray.push()

问题原来是这一行：

self.contacts(ko.mapping.fromJS(data.data));

解决方案：添加 .push() 可以增加数组的长度属性。我曾假设 ko.mapping 会处理这个问题，但事实并非如此。将变量更改为 observable 没有效果。

$.each(data.data, function () {
          self.contacts.push(ko.mapping.fromJS(this));
           console.log(self.contacts().length);
                                    });
于 2013-03-21T20:03:38.387 回答
0

我遇到了这样的问题，IIRC，这是因为我在评论条件中使用双等号（==）而不是三等号（===）。试一试。

于 2013-03-21T18:56:40.533 回答
0

代替：

self.contacts(ko.mapping.fromJS(data.data));

你应该有：

self.contacts(ko.mapping.fromJS(data.data)**()**);
于 2016-12-07T12:07:43.360 回答