更新:最も重要な情報を忘れていたようです。これはhtmlファイルではなく、xslファイルでした。ko コメント タグが取り除かれていたため、「名前」が存在しませんでした。JSFiddle に行くことで私を正しい方向に導いてくれた彼の功績を認めるために、Damien の回答を回答としてマークします。ありがとう。
元の質問:
ノックアウト.jsを使用して、テーブル内のJSONオブジェクトから内部配列をバインドする方法はありますか? 私は非常に多くの方法を試しましたが、どれもうまくいかないようです。同様の質問が 2 つあります。
Knockout foreach を使用したネストされた配列のバインド
ただし、どちらの場合も、コンテナー バインディングを使用しています。コンテナーレス バインディングを使用する必要がありますが、機能していないようです。
簡単なコード例を次に示します。
var reportData = {[ "カテゴリー": "最初のカテゴリー", "ID": 1, "アイテム": [ {"名前": "名"}, {"名前": "セカンドネーム"} ] }、{ "カテゴリ": "2 番目のカテゴリ", "ID": 2, "アイテム": [ {"名前": "名"}, {"名前": "セカンドネーム"} ] }];
バインディング コードは基本的なものです (抜粋)。
var viewModel = 関数() { var self = this; self.reportData = ko.observableArray(); } var vm = 新しいビューモデル(); vm.reportData(データ); ko.applyBindings(vm);
私が必要とするのは:
<tbody data-bind="foreach: reportData"> <tr> <td data-bind="text: Category"></td> </tr> <!-- ko foreach: アイテム --> <tr> <td data-bind="text: Name"></td> </tr> <!-- /ko --> </tbody>
内部配列データにアクセスするためにさまざまな方法を試しましたが、「名前」が定義されていないというエラーが常に発生します。コンソールで正しいデータを取得していることを確認しています。外側のオブジェクト配列の値は問題なく表示されます。
この内部配列にアクセスし、内部配列のコンテナーレス バインディングを使用してテーブルに表示する適切な方法は何ですか?