Question

我正在使用knockout.js。我声明了2个模型对象：

1）

var model =
{
    products: ko.observableArray([])
}

2）

var customerModel = 
{
    cart: ko.observableArray([]),
    filteredProducts: ko.observableArray([]),
    currentView: ko.observable("list")
}

文件准备好后：

$(document).ready
(
    function () {
        getProducts();
    }
);

它调用getProducts，它将model.products observable数组设置为只有一个对象：

var getProducts = function () {

    model.products.removeAll();
    model.products.push
    (
        {
            Id: 1,
            Name: "Product 1",
            Description: "A nice product",
            Price: 666.66,
            Category: "Category 1"
        }
    )
}

我有一个呈现ASP.NET局部视图的视图。默认的customerModel.currentView是'list'（从我声明的模型对象看到）：

<div data-bind="visible: customerModel.currentView() == 'list'">
    @Html.Partial("ProductList")
</div>

部分视图（ProductList.cshtml）中的

是以下代码：

<div data-bind="foreach: model.products()">
    <span data-bind="text: $data.Description"></span>
    <button data-bind="click: addToCart">Add to Cart</button>
</div>

单击该按钮会调用addToCart函数，该函数会将产品添加到购物车并设置视图：

var addToCart = function (product) {
    var cart = customerModel.cart;
    cart().push
    (
        {
            product: product,
            count: 1
        }
    );
    setView('cart');
}

setView是这样的：

var setView = function (view) {
    customerModel.currentView(view);
}

设置为“购物车”时，以下代码呈现部分视图：

<div data-bind="visible: customerModel.currentView() == 'cart'">
    @Html.Partial("ProductCart")
</div>

现在HERE是踢球者。 ProductCart.cshtml看起来像这样：

<script>
    var testCart = function () {
        alert("There is " + customerModel.cart().length + " item incustomerModel.cart()");
    }
</script>

<div data-bind="if: customerModel.cart().length == 0">There are no items in customerModel.cart( </div>
<button data-bind="click: testCart">Test Cart</button>

那猜猜怎么着？显示“customerModel中没有项目”的div显示，因为customerModel.cart（）。length == 0，但是当我点击按钮时，警告告诉我customerModel.cart（）。length等于1。 / p>

Answer 1

您似乎需要将cart().push更改为cart.push，就像使用model.products一样。

这就是observableArray的工作方式。请参阅documentation。

当你调用cart()时，它会返回一个新数组，其值在observable中。您正在将新值推送到该阵列，该阵列正在陷入困境。

您需要通过push API调用ko.observableArray方法，这样它会通知所有订阅者此更改，新值将添加到observableArray。< / p>

UI说我的observableArray（）。长度== 0一分钟，然后== 1下一个？

1 个答案: