2013-03-30 96 views
0

我是一个新手淘汰赛,需要一些帮助。帮助重新绑定json淘汰赛模型

我有一个mvc asp.net页面,当它加载时,我做了一个客户端调用控制器操作,返回json,我创建了一个视图模型,并将其绑定到一些标记与淘汰赛。

这是一些示例代码:

的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对象,而不必重新绑定绑定,并且标记显示了更改?

回答

3

你可以再打电话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)