2

我的视图绑定到一个模型并显示几个下拉列表，它们的数量和选项基于模型中的一些属性。

我想使用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 是使用从服务器端代码传递到视图（序列化之后）的模型构建的二维数组。

我希望这能有所帮助！

4

2 回答 2

0

我建议像这样传递下拉列表： {firstArray: [1,2,3], secondArray: [4,5,6]}

基本上，您不会按照您建议的方式保存任何工作。你可以让'firstArray'和'secondArray'不像你的索引器那样对人类友好。虽然我不确定为什么这会是一个有价值的目标；）我尽可能地追求可维护的代码。任何在你之后进来并看到多级索引器的人都不会欣赏你的聪明或后来他们的头痛。

于 2012-05-14T14:32:40.053 回答
0

我意识到我从未关闭过这个问题，所以我在这里添加一个回复：

好的，我错过了一个关键步骤：可观察数组中的每个项目本身就是一个可观察值，因此我将其修复如下：

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 是使用从服务器端代码传递到视图（序列化之后）的模型构建的二维数组。

于 2012-05-15T11:42:01.683 回答