2

我正在使用 KnockoutJS 编写一个小型应用程序,用户可以通过在输入字段中输入文本来编辑“产品”,该输入字段将自动更新图像顶部的可查看文本框。这允许用户在购买例如牌匾之前预览可雕刻的线条。

所以这是我的问题:

我有一个包含 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)
  }
}

json数据:

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/

当通过编辑输入字段进行更新时,我需要写什么来更新该值?

谢谢..

4

1 回答 1

2

您创建了一个 observableArray 行,但是当将对象添加到 observableArray 时,它们的属性不会变为可观察的,这由您来实现。

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

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

希望这可以帮助。

于 2012-04-19T03:09:25.273 回答