配列要素を入力または選択の値としてバインドする方法はありますか？
このようなもの...
var ViewModel = function() {
var self = this;
self.array = ko.observableArray([undefined, undefined, undefined]);
self.text = ko.computed(function() {
return self.array()[0] + self.array()[1] + self.array()[2];
});
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: $root.array[0]" />
<input data-bind="value: $root.array[1]" />
<input data-bind="value: $root.array[2]" />
<p data-bind="text: $root.text"></p>編集
申し訳ありませんが、質問をするのは本当にひどいですが、私の問題はもう少しトリッキーです。私の実際のエントリは、配列と選択された値のフィルターであるselectです。このような：
var ViewModel = function() {
var self = this;
self.family = ko.mapping.fromJS(data.family);
self.array = ko.observableArray([ko.observable(undefined), ko.observable(undefined), ko.observable(undefined)]);
self.filterFamily1 = function() {
return self.family().filter(function(i) {
return i.parent() == null;
});
}
self.filterFamily2 = ko.computed(function() {
return ko.utils.arrayFilter(self.family, function(i) {
return i.parent() === self.array()[0]().name();
});
});
self.filterFamily3 = ko.computed(function() {
return ko.utils.arrayFilter(self.family, function(i) {
return i.parent() === self.array()[1]().name();
});
})
}
var data = {
family: [{
name: "John",
parent: null
}, {
name: "Mary",
parent: null
}, {
name: "Erick",
parent: "John"
}, {
name: "Paul",
parent: "John"
}, {
name: "Marshall",
parent: "Mary"
}, {
name: "Ross",
parent: "Paul"
}]
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<select data-bind="options: $root.filterFamily1(),optionsText: 'name', value: $root.array()[0]"></select>
<select data-bind="options: $root.filterFamily2(),optionsText: 'name', value: $root.array()[1]"></select>
<select data-bind="options: $root.filterFamily3(),optionsText: 'name', value: $root.array()[2]"></select>しかし、私が前に説明した問題に対する答えは正しかった。
あなたの質問は大きく変わったので、私は新しい答えを投稿しています：
スニペットにコンソールエラーがありました。最初に選択した値が設定されておらず、未定義をチェックしていません。これらのチェックを含めると、すべてが機能します。
読みやすさを確実に改善し、繰り返し発生するコードセクションをリファクタリングできることに注意してください。
var ViewModel = function() {
var self = this;
self.family = ko.mapping.fromJS(data.family);
self.filterFamily1 = ko.computed(function() {
return self.family().filter(function(i) {
return i.parent() === null;
});
});
self.array = ko.observableArray([
ko.observable(self.filterFamily1()[0]),
ko.observable(undefined),
ko.observable(undefined)
]);
self.filterFamily2 = ko.computed(function() {
return self.family().filter(function(i) {
return self.array()[0]() && i.parent() === self.array()[0]().name();
});
});
self.filterFamily3 = ko.computed(function() {
return self.family().filter(function(i) {
return self.array()[1]() && i.parent() === self.array()[1]().name();
});
})
}
var data = {
family: [{
name: "John",
parent: null
}, {
name: "Mary",
parent: null
}, {
name: "Erick",
parent: "John"
}, {
name: "Paul",
parent: "John"
}, {
name: "Marshall",
parent: "Mary"
}, {
name: "Ross",
parent: "Paul"
}]
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<select data-bind="options: $root.filterFamily1(),optionsText: 'name', value: $root.array()[0]"></select>
<select data-bind="options: $root.filterFamily2(),optionsText: 'name', value: $root.array()[1]"></select>
<select data-bind="options: $root.filterFamily3(),optionsText: 'name', value: $root.array()[2]"></select>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加