无法解决带有嵌套对象的淘汰赛js [英] can't resolve knockout js with nested objects

问题描述

我正在尝试学习淘汰赛，无法弄清楚孩子们的可观察性如何工作！我试过阅读许多文章，甚至在SO上遇到许多问题，但可能在某处缺少了一些东西.

i'm trying to learn knockoutjs and can't figure out how the children observable works! i've tried reading many articles and many problems even on SO but probably missing something somewhere.

我的json结构是(由Rails json渲染器生成):

my json structure is (generated by Rails json renderer):

相册->曲目->元数据

Albums -> Tracks -> Metadata

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

等

我的视图也是嵌套的.在页面中，每个专辑都位于一个div下，每个曲目都位于上一个div中的表格行下.

My view's are nested as well. In a page, each album goes under a div and each track goes under table row in the above div.

我的视图和JS代码在JS小提琴中. http://jsfiddle.net/var56/

My View and JS codes are in JS Fiddle. http://jsfiddle.net/var56/

问题: 如果您在JSFiddle中看到该视图，您将看到我已将html部分标记为正在工作(相册)而未工作(轨道).初始视图正确呈现.当我在文本字段中更新专辑名称时，以上h2正在正确更新.但是在轨道模板中，当我更新轨道标题时，它不会在下面的跨度中更新.

Problem: If you see the view in JSFiddle, you will see that i've marked html part which is working (album) and which is not working (track). The initial view rendered correctly. When I update the album name in the text field, the above h2 is updating correctly. but in the track template, when i update the track title, it is not updating in the underneath span.

此外，我尝试在chrome控制台中导出数据.

Moreover, i've tried to export the data in the chrome console.

ko.toJSON(viewModel)

或者， ko.mapping.toJSON(viewModel)

or, ko.mapping.toJSON(viewModel)

它为我提供了旧数据(这意味着不会返回更改的值).

it gives me old data (that means, the changed values are not returned).

我还将添加/删除相册&跟踪并希望viewModel和视图反映相同的内容.

I will also add/remove albums & tracks and want the viewModel and views to reflect the same.

我在哪里缺少什么?

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

Note: Actual JSON data is here:

[
  { "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，可以模拟我面临的问题.

i could not get anything working. now i've tried creating a jsFiddle that can simulate the problem i'm facing.

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

我现在也有一个映射对象(尽管在代码中您可能会看到未引用该对象，但是如果需要，也可以尝试).您会看到专辑名称正在正确更新.但是标题"和文件名"字段不会更新相邻范围(绑定到相同的可观察范围).

I've now a mapping object too (though in the code you may see that is not referenced, you can try if you want). You will see that album names are updating correctly. But Title and File Name fields are not updating the adjacent span (bound to same observable).

推荐答案

根据您的更新，问题不是不是无法观察到子对象，而是跟踪信息的输入字段中的data-bind属性. 值"数据绑定不是属性"数据绑定的子代.

According to your update the issue is not that the child objects are not observable, it is with the data-bind attribute on your input fields for the track info. The "value" data-bind is not a child of the "attr" data-bind.

这是一个正常工作的jsFiddle http://jsfiddle.net/Bb538/4/

Here's a working 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=""/>

这篇关于无法解决带有嵌套对象的淘汰赛js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！