私はノックアウトの初心者で、助けが必要です。
私は 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オブジェクトを渡し、バインディングを再適用する必要がなく、マークアップが変更を表示することができますか?