Question

首先，这是我关于堆栈溢出的第一篇文章，很荣幸成为这个社区的一员。我需要帮助。我正在使用mvc和knockout.js。我有一个带有数据列表对象的Model。我创建另一个并从原始中仅选择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设置为新数据源以及Filtered数据，并且新数据存在，但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将订阅它并在其值更改后重建标记。

knockout.js新数据源刷新html

1 个答案: