以下を含むJSONファイルがあるとします。
{
"First" : [
"A",
"B",
"C"
],
"Second" : [
{ "name" : "A"},
{ "name" : "C"}
]
}
さて、以下は私が達成しようとしていることを示すために私のHTMLコードの小さな部分です：
<span data-bind="foreach: First">
<span data-bind="foreach: Second">
//if First.A === Second.name then do something
</span>
</span>
その比較を行うにはどうすればよいですか？私は多くのことを試みましたが、正しい方法を理解することができませんでした。$ dataを使用してここで「First」の値にアクセスできることは知っていますが、このネストされたループで何を使用するのでしょうか。私はこれに不慣れです。どんな提案でも大歓迎です。
もう少し情報：私のHTMLコードは実際には次のようなものです：
<span data-bind="foreach: first">
<tbody data-bind="foreach: $root.second">
<tr data-bind="if: $parent === $data.name">
//do something
</tr>
</tbody>
.
.
.
</span>
これは機能しません。
まず、あなたの質問の最後にHTMLが有効ではありません：あなたが持つことができないtbodyではspan（それを試してみてください：あなたは、ブラウザが無視表示されますtbody）。
さて、あなたの質問に：私はあなたのケースを再現するビューモデルとそれに応じたhtmlをコーディングしました。
ここで理解することが重要なの$parentは、親コンテキストのビューモデルオブジェクトを参照しているということです。したがって、次のHTMLで、$parentではforeach: $parent.seconds指すmyVMが、文脈$parentではif: $parent指すfirsts文脈。
var myVM = function () {
var self = this;
self.firsts = ['A', 'B', 'C'];
self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: firsts">
<span data-bind="foreach: $parent.seconds">
<span data-bind="if: $parent == $data.name">hello!</span>
</span>
</span>それをコーディングする方法は他にもありますが、もう1つは、次のように変更$parent.secondsする$root.seconds（そして同じ結果が得られる）方法です。
var myVM = function () {
var self = this;
self.firsts = ['A', 'B', 'C'];
self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: firsts">
<span data-bind="foreach: $root.seconds">
<span data-bind="if: $parent == $data.name">hello!</span>
</span>
</span>さらに、エイリアスを追加することで読みやすさを向上させることができます。
var myVM = function () {
var self = this;
self.firsts = ['A', 'B', 'C'];
self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: { data: firsts, as: 'first' }">
<span data-bind="foreach: { data: $root.seconds, as: 'second' }">
<span data-bind="if: first == second.name">hello!</span>
</span>
</span>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加