更新項目陣列

Question

我非常新的使用KnockoutJS作爲一個框架，我（顯然）遇到了問題，我不能（或者更可能的，我沒有足夠的技術來）找到。

我有該產品組和產品的每個組包含的產品陣列。現在，我設法顯示產品組列表和所有產品列表，沒有太多問題。當用戶用鼠標右鍵單擊包含產品的div並減少產品數量時，我想要增加產品數量。

我已正確設置事件處理程序，因爲他們被解僱和處理，沒有任何問題和數量改變，但我似乎無法得到它反映在頁面上。

標記：

<div class="viewProductGroup" data-bind="with: productGroupData"> 
    <h2 data-bind="text: Title"></h2> 
    <div class="stickies" data-bind="foreach: Products"> 
     <div data-bind="click: $root.addProduct, 
         event: { contextmenu: $root.removeProduct }"> 
      <span data-bind="text: Title"></span><br />(<span data-bind="text: Quantity"></span>)</div> 
    </div> 
</div> 

摘自JS：

function StickyExViewModel() { 
    var self = this; 

    self.productGroupData = ko.observable(); 

    // Behaviors 
    self.addProduct = function (item) { 
     item.Quantity++; 
    } 
    self.removeProduct = function (item) { 
     item.Quantity--; 
    } 
} 

ko.applyBindings(new StickyExViewModel()); 

現在，我相信，我不明白的地方或者已經錯過了一些佈線。你能幫忙嗎？

編輯

在這裏從WCF服務獲得JSON：

{"d": 
    {"__type":"ProductGroup:#Stickyex.Services", 
    "Created":"\/Date(1373407200000+0200)\/", 
    "ID":1, 
    "Products":[ 
     {"__type":"Product:#Stickyex.Services","Code":"0","ID":0,"Quantity":0,"Title":"0"}, 
     {"__type":"Product:#Stickyex.Services","Code":"1","ID":1,"Quantity":1,"Title":"1"}, 
     {"__type":"Product:#Stickyex.Services","Code":"2","ID":2,"Quantity":2,"Title":"2"}], 
    "Title":"ProductGroup 1"} 
} 

代碼以獲得JSON數據（內部StickyExViewModel）：

self.goToProductGroup = function(productGroup) { 
    $.get(serviceUrl, { ixProductGroup: productGroup.ID }, function (data) { 
     self.productGroupData(data.d); 
    }); 
} 

Answer 1

感謝大家試圖成功幫助我的人，我找到了最終的解決方案。爲了更新數量，我不應直接綁定到JSON對象，而是在JS中創建代表JSON對象模型的類。

function Product(item) { 
    this.ID = item.ID; 
    this.Title = item.Title; 
    this.Quantity = ko.observable(item.Quantity); 
} 

function ProductGroup(data) { 
    var self = this; 
    this.ID = data.ID; 
    this.Title = data.Title; 
    this.Products = []; 
    for (var i = 0; i < data.Products.length; i++) { 
     self.Products.push(new Product(data.Products[i])); 
    } 
} 

而且在那裏我獲得JSON的部分改爲：

self.goToProductGroup = function(productGroup) { 
    $.get(serviceUrl, { ixProductGroup: productGroup.ID }, function (data) { 
     self.productGroupData($.map(data, function (pg) { 
      return new ProductGroup(pg); 
     })); 
    }); 
} 

Answer 2

我想這是item.Quantity可觀察，所以你不能使用增量和減量。每個觀察到的是一個函數，所以你必須使用()獲取或設置值：

// Behaviors 
self.addProduct = function (item) { 
    item.Quantity(item.Quantity() + 1); 
} 
self.removeProduct = function (item) { 
    item.Quantity(item.Quantity() - 1); 
} 

Answer 3

數量屬性需要是obsevable。 所以在StickyExViewModel你將能夠做到這一點：

function StickyExViewModel() { 
    var self = this; 

    self.productGroupData = ko.observable(); 

    // Behaviors 
    self.addProduct = function (item) { 
     item.Quantity(item.Quantity()++); 
    } 
    self.removeProduct = function (item) { 
     item.Quantity(item.Quantity()--); 
    } 
} 

由數量轉換爲可觀察到的，你的GUI將盡快更改屬性刷新一個。

Answer 4

我認爲你需要做的方式稍加修改您轉換您productGroupData到觀察的對象。

第一個：productGroupData應該是observableArray而不是observable，因爲它實際上是一個數組。
self.productGroupData = ko.observableArray([]);

二到您的JSON字符串轉換爲observableArray你可以採取的KnockoutJS mapping plugin優勢。這將使你的編碼好得多。所以，你可以用它來你的JSON轉換成observableArray

ko.mapping.fromJS(yourJS_Object, {}, self.productGroupData);//in case you have JS object 

OR

ko.mapping.fromJSSON(yourJSON_String, {}, self.productGroupData);//in case you have JSON string. 

注意，現在的你productGroupData是觀測所有的屬性或對象，以便對其進行訪問，你需要使用()