knockout.js新的数据源刷新HTML [英] knockout.js new data source refresh html

问题描述

首先，这是我的堆栈溢出的第一篇文章和荣幸能成为这个社区的一部分。我需要帮助。我使用MVC和knockout.js。我有一个数据列表对象的模型。我创建了一个又一个选择只有5从原来的。这样做的原因是在原来的一组数据进行过滤，但只从原来的列表中显示某些数据。

Firstly, this is my first post on stack overflow and its an honor to be part of this community. I need help. I am using mvc and knockout.js. I have a Model with a list object of data. I create another one and select only 5 from the original. The reason for this is to filter upon the original set of data but only show certain data from the original list.

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换每个部分？

This works fine and the foreach in the html renders fine. What I need help with is when I make another call to the server and get a new data source, how do I re-render the html for-each part?

我曾尝试CartModel设置为新的数据源，以及以同样的方式过滤后的数据，如上所述，与新的数据是present，但在html不改变

I have tried setting the CartModel to the new datasource as well as the Filtered data in the same way as mentioned above, and the new data is present, but the html does not change.

 $.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);
            //}
        });

我是新来的淘汰赛，并会AP preciate的任何援助。在此先感谢

I am new to knockout and would appreciate any assistance. Thanks in advance

推荐答案

您需要Ajax调用外部定义的可观察到的CartModel：

You need an observable CartModel defined outside ajax call:

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

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

in the ajax success you should put new value into this observable:

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

和更改标记的结合

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

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

In this case you will have the only observable CardModel, knockout will subscribe to it and rebuild markup after it's value changed.

这篇关于knockout.js新的数据源刷新HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！