knockout.js 新数据源刷新html

Question

首先，这是我关于堆栈溢出的第一篇文章，很荣幸成为这个社区的一员。我需要帮助。我正在使用 mvc 和 knockout.js。我有一个带有数据列表对象的模型。我创建了另一个，并从原件中只选择了 5 个。这样做的原因是过滤原始数据集，但只显示原始列表中的某些数据。

var data = @Html.Raw(Json.Encode(Model));
self.CartModel = ko.wrap.fromJS(data);
        self.CartModel.FilteredData = ko.computed(function () {
            return self.CartModel.OriginalData().slice(0, 5);
        }, self);



<div id="NbId" class="listing-style3" data-bind="foreach: Cart.CartModel.FilteredData">
                        <article class="box">
                            <figure class="col-sm-5 col-md-4">
                                <img style="width:270px; height: 160px; " alt="" data-bind="attr:{src:Image}">
                            </figure>
                            <div class="details col-sm-7 col-md-8">
                                <div>
                                    <div>
                                        <img data-bind="attr:{src:RatingUrl}" />
                                    </div>
                                </div>
                                <div>
                                    <p data-bind="text: Teaser"></p>
                                </div>
                            </div>
                        </article>
                    </div>

这可以正常工作，并且 html 中的 foreach 可以正常呈现。我需要帮助的是，当我再次调用服务器并获取新数据源时，如何为每个部分重新渲染 html？

我已经尝试将 CartModel 设置为新的数据源以及与上面提到的相同的过滤数据，并且新数据存在，但 html 没有改变。

 $.ajax({
            cache: false,
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            url: url,
            data: requestAvailability,
            success: function (data) {
                var response = data.NewData;
                CartApp.Cart.CartModel = ko.wrap.fromJS(response);
                CartApp.Cart.CartModel.FilteredData = ko.computed(function () {
                    return CartApp.Cart.CartModel.OriginalData().slice(0, 5);
                }, CartApp.Cart);
                //targetDiv.html();
                //targetDiv.html(data);
            }
            //, error: function (xhr) {
            //    var status = xhr.status;
            //    var responseText = xhr.responseText;
            //    //alert("Error "+ status+" - "+ responseText);
            //}
        });

我是淘汰赛的新手，希望能提供任何帮助。提前致谢

Answer 1

您需要在 ajax 调用之外定义一个可观察的 CartModel：

CartApp.Cart.CartModel = ko.observable();

在 ajax 的成功中，你应该给这个 observable 赋予新的价值：

CartApp.Cart.CartModel(ko.wrap.fromJS(response));
CartApp.Cart.CartModel().FilterdData = ...

并更改标记中的绑定

... foreach: CartApp.Cart.CartModel().FilteredData

在这种情况下，您将拥有唯一可观察的 CardModel，knockout 将订阅它并在其值更改后重建标记。