Question

我是淘汰赛的新手，需要一些帮助。

我有一个mvc asp.net页面，当它加载时，我做一个客户端调用控制器动作，返回json，我创建一个视图模型并将其绑定到某些标记与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>

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

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

我需要对上面的内容做出哪些更改才能实现此目的？如何传递json对象而不必重新应用绑定并且标记显示更改？

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）

帮助将json重新绑定到淘汰模型

1 个答案: