0

ノックアウト js を学習しようとしていますが、子供たちの観察可能な仕組みがわかりません! SOでも多くの記事と多くの問題を読んでみましたが、おそらくどこかで何かが欠けています。

私のjson構造は(Rails jsonレンダラーによって生成されます):

アルバム -> トラック -> メタデータ

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

等

私のビューもネストされています。ページでは、各アルバムは div の下にあり、各トラックは上記の div のテーブル行の下にあります。

私のビューと JS コードは JS Fiddle にあります。http://jsfiddle.net/var56/

問題: JSFiddle でビューを表示すると、動作している (アルバム) と動作していない (トラック) html 部分をマークしたことがわかります。正しくレンダリングされた初期ビュー。テキスト フィールドでアルバム名を更新すると、上記の h2 が正しく更新されます。しかし、トラック テンプレートでは、トラック タイトルを更新すると、下のスパンで更新されません。

さらに、クロムコンソールでデータをエクスポートしようとしました。

ko.toJSON(viewModel)

または、ko.mapping.toJSON(viewModel)

古いデータが返されます (つまり、変更された値は返されません)。

また、アルバムとトラックを追加/削除し、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/を確認してください。

マッピング オブジェクトも作成しました (参照されていないコードが表示される場合がありますが、必要に応じて試すことができます)。アルバム名が正しく更新されていることがわかります。ただし、タイトルとファイル名のフィールドは、隣接するスパンを更新していません (同じオブザーバブルにバインドされています)。

4

2 に答える 2

3

あなたの更新によると、問題は子オブジェクトが観察できないということではなく、トラック情報の入力フィールドのデータバインド属性にあります。「値」データバインドは、「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=""/>
于 2012-09-20T03:40:33.840 に答える
1

私の疑いは、あなたの「トラック」オブジェクトとプロパティがマッピングプラグインによってオブザーバブルにマッピングされていないことです。これにより、値が変更されたときにビューに通知できなくなり、その逆も同様です。

ネストされた JSON オブジェクト構造を代表的なビュー モデルにマッピングすることに関する私の Q & A を確認してください: 特定のビュー モデル タイプで JSON データを Knockout observableArray にマップする

重要なポイントは、ネストされたオブジェクトをマッピングおよび変換する方法をマッピング プラグインに指定するために使用されるマッピング オブジェクトです。

Albums-Tracks シナリオに関する具体的な例を次に示します: http://jsfiddle.net/KodeKreachor/qRKtK/26/

于 2012-09-14T12:37:59.473 に答える