javascript - 协助将 json 重新绑定(bind)到 knockout 模型

Question

我是 knockout 新手，需要一些帮助。

我有一个 mvc asp.net 页面，当它加载时，我对返回 json 的 Controller 操作进行客户端调用，我从中创建一个 View 模型并将其绑定(bind)到一些带有 knockout 的标记。

这是一些示例代码:

Javascript

  var CartViewModel = function (d) {

    var self = this,
        showCartInner = function () {
            // code to show a container
        },
        hideCart = function () {
            // code to hide a container
        };

    self.showCart = function () {  
        showCartInner();
    };

    ko.mapping.fromJS(d, {}, self);

    self.hasItems = ko.computed(function () {
        return self.NumberOfItems() > 0;
    });

    self.count = ko.computed(function () {
        return self.NumberOfItems();
    });

    self.qualified = ko.computed(function () {
        return self.Qualified().length > 0;
    });

    return self;
};

$(document).ready(function () {

    $.getJSON("/getcart", function (data) {
        ko.applyBindings(new CartViewModel(data), window.document.getElementById("cart"));
    });

});

HTML

<div id="cart">
<div style="display: none;" data-bind="css: { content: !hasItems() }">
empty Cart
</div>

<div style="display: none;" data-bind="css: { content: hasItems() }">
    <span class="loading">
      Look at your items
    </span>
</div>

<div style="display: none;" id="hidden_menu">
    <div id="hidden_cart">
        <div class="cart-item">
            <div class="thumb-img inline">
                <img data-bind="attr: { src: Product.Image, alt: Product.Name }" />
            </div>
            <div class="product-desc inline">
                <span class="name" data-bind="text: Product.Name"></span>
            </div>
            <div class="product-price" data-bind="text: Product.Price"></div>
        </div>
        <div class="cart-offers" data-bind="visible: qualified()">
            <div class="triangle-up-gray"></div>

            <div class="cart-offer" data-bind="visible: qualified()">
                <div id="qualified" data-bind="foreach: { data : Qualified }">
                    <div class="cart-offer-desc" data-bind="text: Description"></div>
                    <a class="cart-offer-action" data-bind="href: Url">View More</a>
                </div>
            </div>
        </div>
    </div>
</div>

当页面加载时，将进行调用以检索购物车并绑定(bind)到标记，请参见上文。

现在，当用户通过调用 Controller 操作在页面上更新其购物车时，返回的是相同的 json 对象。此时，我想使用新的 json 对象更新我的标记。

为了实现这一目标，我需要对上述内容进行哪些更改？如何传递 json 对象而不必重新应用绑定(bind)并且标记显示更改？

Answer 1

你可以再次调用 ko.mapping.fromJS

var viewModel = null;

$(document).ready(function () {

    $.getJSON("/getcart", function (data) {
        viewModel = new CartViewModel(data);
        ko.applyBindings(viewModel, window.document.getElementById("cart"));
    });

});

function afterSomeUpdate(dataFromServer){
   ko.mapping.fromJS(dataFromServer, viewModel);
}

查看此链接:http://knockoutjs.com/documentation/plugins-mapping.html (示例:使用 ko.mapping)