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

コンソール コマンド: vm.customerOverview().contacts().length 0

- - - - - - - - - - - - - -解決 - - - - - - - - - - - observableArray.push()

問題は次の行であることが判明しました：

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

解決策: これに .push() を追加すると、配列の長さプロパティをインクリメントできるようになりました。私は ko.mapping がこれを処理すると思っていましたが、そうではありません。変数を観測可能に変更しても効果はありませんでした。

 $.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 に見られる関数を反映した一連の配列操作関数を提供します。ポップ、プッシュ、シフト、アンシフト、リバース、ソート、スプライス。これらの配列関数は、期待される操作を実行するだけでなく、配列が変更されたことをオブザーバーに自動的に通知します。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 で contact( ).length プロパティを使用して、配列内のすべての変更について通知を受けることができます。

于 2016-05-17T13:34:06.593 に答える
2

observableArray.push()

問題は次の行であることが判明しました：

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

解決策: これに .push() を追加すると、配列の長さプロパティをインクリメントできるようになりました。私は ko.mapping がこれを処理すると思っていましたが、そうではありません。変数を観測可能に変更しても効果はありませんでした。

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

それ以外の：

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

あなたが持っている必要があります：

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

私はこのような問題を抱えていました.IIRCは、コメント条件でトリプルイコール（===）の代わりにダブルイコール（==）を使用していたためです。試してみます。

于 2013-03-21T18:56:40.533 に答える