我的视图绑定到一个模型并显示几个下拉列表,它们的数量和选项基于模型中的一些属性。
我想使用knockout js将下拉列表的每个选定值数据绑定到一个可观察的数组,跟踪哪个值属于哪个ddl。
每个下拉列表都使用以下代码显示:
@for (var i = 0; i < Model.ProductProfiles.Count; i++)
{
var productProfile = Model.ProductProfiles[i];
if (productProfile.IsVarying)
{
var lastItem = 0;
<div class="tab-pane" id="@productProfile.Name">
@for (var j = 0; j < productProfile.Attributes.Count; j++)
{
<text>@productProfile.Attributes[j].Name</text>
@Html.DropDownListFor(m => m.ProductProfiles[i].SelectedValues[j], (SelectList)ViewData["Levels_" + i + "_" + j],
new { @class = "ddl-levels" })
<br />
}
</div>
}
}
正确填写了下拉列表并正确设置了默认值(同时使用模型和在 ViewData 中传递的选择列表)。
有没有办法将数据绑定到看起来像这样的数组:
array[0]["0", "1", "3", "1",....] 其中 array[0] 指的是 Model.ProductProfiles[0] 并且数组的第二维保存选定的值对于 for 循环中显示的 ddl ?
我尝试将我的视图模型设置为
var viewModel = {
selectedValues: ko.observableArray([])
};
出于绝望,我尝试修改数据绑定值以模拟可观察数组中的位置访问:
@Html.DropDownListFor(m => m.ProductProfiles[i].SelectedValues[j], (SelectList)ViewData["Levels_" + i + "_" + j],
new { @class = "ddl-levels", data_bind = "value: productProfiles([" + i + "][" + j + "])" })
不幸的是它没有工作......
我希望已经清楚,否则我很乐意在被要求澄清时澄清。有谁能帮助我吗?
谢谢
编辑:根据评论建议,我将多维数组拆分为 3 个可观察数组,如下所示:
var viewModel = {
selectedValuesProd0: ko.observableArray(),
selectedValuesProd1: ko.observableArray(),
selectedValuesProd2: ko.observableArray()
}
然后我修改了 HTML 代码
var observableArrayProduct = "selectedValuesProd0";
if (i == 1)
{
observableArrayProduct = "selectedValuesProd1";
}
else if (i == 2)
{
observableArrayProduct = "selectedValuesProd2";
}
@Html.DropDownListFor(m => m.ProductProfiles[i].SelectedValues[j], (SelectList)ViewData["Levels_" + i + "_" + j], new { @class = "ddl-levels", data_bind = "value: " + observableArrayProduct + "()[" + j+ "]" })
如您所见,我仍在尝试对一维可观察数组进行位置访问,但是当用户更改 DropDown 列表中的某些内容时,它仍然没有跟踪所选值。
在这一点上,我开始认为位置访问不起作用,但如果是这样,我还能做什么?
编辑 2:已解决!
好的,我错过了一个关键步骤:可观察数组中的每个项目本身就是一个可观察值,因此我将其修复如下:
var viewModel = {
selectedValuesProd0: ko.observableArray(ko.utils.arrayMap(selectedValuesPerProduct[0], function(item) {
return ko.observable(item);
})),
selectedValuesProd1: ko.observableArray(ko.utils.arrayMap(selectedValuesPerProduct[1], function(item) {
return ko.observable(item);
})),
selectedValuesProd2: ko.observableArray(ko.utils.arrayMap(selectedValuesPerProduct[2], function(item) {
return ko.observable(item);
}))
}
其中 selectedValuesPerProduct 是使用从服务器端代码传递到视图(序列化之后)的模型构建的二维数组。
我希望这能有所帮助!