更新项目阵列

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是观测所有的属性或对象，以便对其进行访问，你需要使用()