knockout.js新的数据源刷新HTML(knockout.js new data source

首先，这是我对堆栈溢出的第一篇文章和荣幸能成为这个社区的一部分。 我需要帮助。 我使用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();

在阿贾克斯成功，你应该把新的值到这个观察到：

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

和改变你的标记绑定

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

在这种情况下，你将有唯一可观测CardModel，淘汰赛将订阅它和它的值更改后重新标记。

文章来源: knockout.js new data source refresh html