Knockout Observable Array Length始終為0

Question

在customerOverview視圖模型中調用任何observable的長度時，我會收到零長度。 隨着綁定隨數據更新，可觀察數據中存在數據，但長度保持為0.基本視圖模型'CustomerCentral'正確返回長度。 我需要'CustomerOverview'中一些observable的長度來做一些條件語句。

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

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

Answer 1

我認為您的問題是沒有將您的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);

Answer 2

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

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

基本上，要解決您的問題，您只需要在可觀察數組上直接使用knockout push函數，而不是使用javascript push方法。 因此：

改變這個：

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

這樣：

self.contacts.push( data.data );

並且您將能夠在html上使用contacts（）。length屬性，並在數組中的每個更改時得到通知。

Answer 4

我有這樣的問題和IIRC，這是因為我在評論條件中使用了雙等號（==）而不是三等號（===）。 試一試。

Answer 5

代替：

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

你應該有：

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