数组更改时,Knockout不会更新?
问题描述:
我有一个Knockout UI,我将对象放入可观察对象中。一旦你点击一个添加到购物车按钮来更新对象,ui不会更新。一旦你刷新页面,将更新。数组更改时,Knockout不会更新?
我听到很多人有这种类型的问题,但我没有看到任何有关这种情况。
全局变量:
var koCart, koQuantity, koTotal;
功能:
function updateCart() {
**parse data **
//assign data to observables
koCart = ko.observableArray(domecart)
koQuantity = ko.observable(quantity)
koTotal = ko.observable(total)
}
视图模型:
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);
车用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>
此外,抛出的错误是,koCart is not a function
。
答
我会避免使用像这样的全局变量,并包含在一个正确构造的viewmodel中的一切。你可能会做这样的事情,你首先从您的视图模型中定义的观测,然后对其进行填充:
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
功能。这样做可能是有益的,因为更新函数可以在计算中通过用户界面中的用户交互自动更新。
它来自本地存储。我会认为这将是好的。有没有办法立即调用淘汰赛功能? – QueSo
当然,这只是一天结束时的JavaScript功能。如果您使用计算机,您可以自动从UI中的更改中进行更新。 – Drummad