2012-04-19 112 views
2

我使用KnockoutJS编写了一个小应用程序,用户可以通过在输入字段中输入文本来编辑“产品”,以便自动更新图像顶部的可查看文本框。这允许用户在购买例如斑块之前预览可雕刻线。knockoutjs - 可观察到的可观察值的对象的observableArray

因此,这里是我的问题:

我有一个对象(产品)持有的observableArray(product.lines):

self.product = ko.utils.arrayMap(jsonData, function(data) { 
    return new CustomizableProduct(
    data.sku, data.name, data.lines, data.fonts, data.plates) 
}); 
function CustomizableProduct(sku, name, lines, fonts, plates) { 
    return { 
    sku: ko.observable(sku), 
    name: ko.observable(name), 
    lines: ko.observableArray(lines), 
    fonts: ko.observableArray(fonts), 
    plates: ko.observableArray(plates) 
    } 
} 

jsonData:

var initialData = [ 
{ 
"sku": "PMW", 
"name": "Premium Genuine Walnut Step Edge Plaque", 
"plates": [ 
    { 
    "sku": "plateSKU", 
    "name": "plateName", 
    "img": "/images/plates/plateSKU.jpg"}, 
{ 
    "sku": "plateSKU2", 
    "name": "plateName2", 
    "img": "/images/plates/plateSKU.jpg"} 
], 
"lines": [ 
    { 
    "label": "Line 1", 
    "value": "Line 1", 
    "type": "input", 
    "characterLimit": "146"}, 
{ 
    "label": "Line 2", 
    "value": "Line 2", 
    "type": "input", 
    "characterLimit": "156"}, 
{ 
    "label": "Line 3", 
    "value": "Line 3", 
    "type": "submit", 
    "characterLimit": "176"} 
], 
"fonts": [ 
    { 
    "font": "Times New Roman"} 
]} 
]; 

product.lines循环并创建输入框,其默认值由对象设置(值:$ data.value)。这些输入框可由用户编辑。我还需要显示输入框的值作为其更新类型,以充当正在输入的内容的预览。当我输入一个新的单词时,它在对象中更新,但是需要显示该值的字段不会更新。

我在这里我的代码的jsfiddle:http://jsfiddle.net/pR6xp/2/

什么我需要编写获得该值时,它通过编辑输入字段更新的更新吗?

谢谢..

回答

2

创建线的observableArray但是当对象被添加到一个observableArray它们的属性不会成为观察到的,这是留给你高达落实。

我添加了一个具有可观察值的ProductLine对象,并用这些对象初始化了线条集合。

http://jsfiddle.net/vRBhP/1/

希望这有助于。

+0

哇谢谢!那就是诀窍。再次感谢。 – 2012-04-19 21:14:32

+0

答案是正确的,但我无法真正理解如何使其适应我的代码。这是什么使我的解决方案: http://code.tutsplus.com/tutorials/knockout-observables--net-31293 – 2015-06-02 05:50:37