いくつかの問題でノックアウトを適用しようとしているシナリオがあります。基本的に私はこの種のUIを持っています
Add (create a new Select Box duo with delete button)
Select Box (options = Json from ajax request)
Select Box (options = Json from ajax request with param from 1st select)
Delete
Select Box
Select Box
Delete
等
各行は配列内の別のウィジェットと見なされるため、簡単にするためにノックアウトします
var ViewModel = function (widgets) {
var self = this;
this.widgets= ko.observableArray(widgets);
this.subWidgets= ko.observableArray();
this.mySelections = ko.observableArray();
this.selectedWidget.subscribe(function (name) {
if (name != null) {
$.ajax({
url: '@Url.Action("AddSubWidgetsByName")',
data: { name: name },
type: 'GET',
async: false,
contentType: 'application/json',
success: function (result) {
self.subWidgets(result);
}
});
}
} .bind(this));
self.addWidget = function (widget) {
self.mySelections.push({
??? profit
});
};
}
var viewiewModel = new ViewModel();
ko.applyBindings(viewiewModel);
$.ajax({
url: '@Url.Action("AddFund")',
type: 'GET',
async: false,
contentType: 'application/json',
success: function (result) {
viewModel.widgets(result);
}
});
<select id="widgets"
data-bind='
options: widgets,
optionsValue : "Name",
optionsText: "Name",
optionsCaption: "[Please select a widgets]"'
value: selectedWidget,
>>
ウィジェットごとに選択を動的に作成し、サブウィジェットの選択をmySelections配列のアイテムに関連付けることはできますか?すべてのドロップダウンがこのようにバインドされているため、selectedWidgetの値のバインドをこのように使用することはできません。私はそれらを独立させる必要があります-それについてどうやって行くかについてのアイデアはありますか?
乾杯!