阵列更改时，Knockout 不会更新？

Question

我有一个 Knockout UI，我将对象放入可观察对象中。单击更新对象的添加到购物车按钮后，ui 不会更新。刷新页面后，它将更新。

我听说很多人都有这种类型的问题，但我还没有看到任何与此案例相关的信息。

全局变量：

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。

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 函数。这样做可能证明是有益的，因为更新功能可以在计算中，它将通过 UI.

中的用户交互自动更新

阵列更改时，Knockout 不会更新？

Knockout doesn't update when the array changes?

javascript

html

knockout.js

knockout-3.0

knockout-mvc