配列が変更されたときにノックアウトが更新されない？

Question

私はObservableにオブジェクトを入れているKnockout UIを持っています。オブジェクトを更新するカートに追加ボタンをクリックすると、UIは更新されません。ページを更新すると、はに更新されます。

この問題のTYPEを持つ多くの人に聞いたことがありますが、このケースには何も見ていません。

グローバルバール：

var koCart, koQuantity, koTotal; 

機能：

function updateCart() { 
    **parse data ** 
    //assign data to observables 
    koCart = ko.observableArray(domecart) 
    koQuantity = ko.observable(quantity) 
    koTotal = ko.observable(total) 
} 

ビューモデル：KOバインディング

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right shopify-buy__cart" id="cbp-spmenu-s2"> 
     <div class="shopify-buy__cart__header"> 
      <h2 class="shopify-buy__cart__title">Cart</h2> 
      <button class="shopify-buy__btn--close"> 
       <span aria-role="hidden" id="x-menu">×</span> 
      </button> 
     </div> 
     <div id="cart" class="shopify-buy__cart-scroll"> 
      <div class="shopify-buy__cart-items" data-bind="foreach: newcart"> 
       <div class="shopify-buy__cart-item"> 
        <div data-bind="style: { 'background-image': 'url(' + images + ')'}" class="shopify-buy__cart-item__image" alt="Product" style="background-repeat:no-repeat;background-size: contain;"></div> 
        <span class="shopify-buy__cart-item__title" data-bind="text: name"></span> 
        <span class="shopify-buy__cart-item__price" data-bind="text: price "></span> 
        <div class="shopify-buy__quantity-container"> 
         <button class="shopify-buy__btn--seamless shopify-buy__quantity-decrement" type="button"> 
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 7h8v2H4z"></path></svg> 
         </button> 
         <input class="shopify-buy__quantity shopify-buy__cart-item__quantity-input" type="number" min="0" aria-label="Quantity" data-bind="attr: {value: quantity}" style="height: 30px; border:solid 1px #d3dbe2 !important;padding-left:13px;" /> 
         <button class="shopify-buy__btn--seamless shopify-buy__quantity-increment" type="button" databind="click: addToCard(id)" > 
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 7H9V4H7v3H4v2h3v3h2V9h3z"></path></svg> 
         </button> 

        </div> 
       </div> 
      </div> 
      <div class="shopify-buy__cart-bottom"> 
       <p class="shopify-buy__cart__subtotal__text" >SUBTOTAL</p> 
       <p class="shopify-buy__cart__subtotal__price"data-bind="text: total"></p> 
       <p class="shopify-buy__cart__notice">Shipping and discount codes are added at checkout.</p> 
       <button class="shopify-buy__btn shopify-buy__btn--cart-checkout" type="button">CHECKOUT</button> 
      </div> 
     </div> 
    </nav> 

と

function viewModel() { 
     self = this; 
     this.newcart = koCart(); 
     this.total = koTotal(); 
     this.quantity = koQuantity(); 
} 
var element = document.getElementById('cart'); 
var element2 = $('.floatingTab')[0]; 
var app = new viewModel(); 
ko.applyBindings(app, element); 
ko.applyBindings(app, element2); 

カート

また、スローされるエラーはkoCart is not a functionです。

Answer 1

このようなグローバル変数は使用しないでください。適切に構築されたビューモデル内のすべてを含めることは避けたいと思います。

function viewModel() { 
    var self = this; 
    self.newcart = ko.observableArray(); 
    self.total = ko.observable(); 
    self.quantity = ko.observable(); 

    self.updateCart = function() { 
     **parse data ** 
     //assign data to observables 
     self.newcart(domecart) 
     self.quantity(quantity) 
     self.total(total) 
    } 
} 

var element = document.getElementById('cart'); 
var element2 = $('.floatingTab')[0]; 
var app = new viewModel(); 
ko.applyBindings(app, element); 
ko.applyBindings(app, element2); 

これはあなたのデータを取得する方法と、あなたがupdateCart関数を呼び出す必要がある場合に依存しない：あなたは、あなたが最初にあなたの観測を定義し、あなたのviewmodelの中からそれらを取り込むところ、このような何かを行う可能性があります。これは、アップデート機能がUI内のユーザーインタラクションを通じて自動的に更新される計算になる可能性があるため、有益です。