Question

我正在努力学习knockoutjs并且无法弄清楚儿童可观察的作品！我试过阅读很多文章和很多问题，甚至可能在某些地方遗漏了某些东西。

我的json结构是（由Rails json渲染器生成）：

相册 - ＆gt;曲目 - ＆gt;元数据

Album
 -Track
  --Metadata
 -Track
  --Metadata
Album
 -Track     
  -- Metadata

等

我的视图也是嵌套的。在一个页面中，每个专辑都在一个div下，每个轨道都在上面div中的表行下面。

My View和JS代码在JS Fiddle中。 http://jsfiddle.net/var56/

问题： 如果你在JSFiddle中看到视图，你会看到我已经标记了html部分正在工作（专辑）而哪些部分无效（轨道）。初始视图正确呈现。当我在文本字段中更新相册名称时，上面的h2正在正确更新。但是在曲目模板中，当我更新曲目标题时，它不会在下面的跨度中更新。

此外，我试图在chrome控制台中导出数据。

ko.toJSON(viewModel)

，或者 ko.mapping.toJSON（视图模型）

它为我提供旧数据（这意味着，不会返回更改的值）。

我还会添加/删除相册＆amp;跟踪并希望viewModel和视图反映相同。

我错过了什么？

注意：实际的JSON数据在这里：

[
  { "id":9,
    "image_path":null,
    "name":"Test Album",
    "price":null,
    "sort_order":null,
    "tracks":[
      { "file_name":"01._Ei_Mon_Joshonay.mp3",
        "file_path":"/media/tracks/1/01._Ei_Mon_Joshonay.mp3",
        "id":192,
        "length":null,
        "metadata":{
          "artist":"Aroti (MR present)",
          "composer":"",
          "created_at":"2012-09-10T11:33:42Z",
          "duration":211,
          "genre":"Other",
          "id":124,
          "lyrics":null,
          "title":"01. Ei Mon Joshonay.mp3",
          "track_id":192,
          "updated_at":"2012-09-10T11:33:54Z",
          "year":0
        },
        "price":null,
        "thumb":"/media/track_thumbs/1/thumb_192.jpg",
        "title":"01. Ei Mon Joshonay.mp3"
      },
      { "file_name":"03._Jare_Ure_Ja_Pakhi.mp3",
        "file_path":"/media/tracks/1/03._Jare_Ure_Ja_Pakhi.mp3",
        "id":193,
        "length":null,
        "metadata":{
          "artist":"MR present",
          "composer":"",
          "created_at":"2012-09-10T11:33:48Z",
          "duration":204,
          "genre":"lata",
          "id":125,
          "lyrics":null,
          "title":"03.Jare ure ja pakhi",
          "track_id":193,
          "updated_at":"2012-09-10T11:33:54Z",
          "year":0
        },
        "price":99.0,
        "thumb":null,
        "title":"03.Jare ure ja pakhi"
      }
    ]
  },
  { "id":11,
    "image_path":null,
    "name":"Album 2",
    "price":null,
    "sort_order":null,
    "tracks":[  ]
  }
]

更新

我无法正常工作。现在我已经尝试创建一个可以模拟我面临的问题的jsFiddle。

请检查http://jsfiddle.net/Bb538/3/。

我现在也是一个映射对象（虽然你可能看到的代码没有被引用，你可以试试，如果你想要的话）。您将看到相册名称正在正确更新。但标题和文件名字段不更新相邻的跨度（绑定到相同的observable）。

Answer 1

根据您的更新，问题不在于子对象不可观察，而是在轨道信息的输入字段中使用data-bind属性。 “value”data-bind不是“attr”数据绑定的子代。

这是一个有效的jsFiddle http://jsfiddle.net/Bb538/4/

你有什么

<input data-bind="attr: { name: 'albums[track_attributes][$index][id]', value: title}" id="" name="" type="text" value=""/>

它应该是什么

<input data-bind="attr: { name: 'albums[track_attributes][$index][id]'}, value: title" id="" name="" type="text" value=""/>

Answer 2

我怀疑你的'track'对象和属性没有被映射插件映射到observable，这会阻止它们在值改变时通知视图，反之亦然。

查看我的Q＆amp;这里将嵌套的JSON对象结构映射到代表性视图模型： Map JSON data to Knockout observableArray with specific view model type

关键外卖是映射对象，用于指定映射插件如何映射和转换嵌套对象。

以下是与您的专辑 - 曲目场景相关的具体示例： http://jsfiddle.net/KodeKreachor/qRKtK/26/

无法使用嵌套对象解析knockout js

2 个答案: