Asp.net mvc 3 KnockoutJS如何将一组下拉列表数据绑定到可观察数组

“我的视图”绑定到一个模型并显示多个下拉列表，其编号和选项基于模型中的某些属性

我想使用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>
            }
        }

出于绝望，我试图修改数据绑定值，以模拟可观测阵列中的位置访问：

@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()
}

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);
    }))
}

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);
}))

然后我修改了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+ "]" })

正如您所见，我仍在尝试对一维可观察数组进行位置访问，但当用户更改下拉列表中的某些内容时，它仍无法跟踪选定的值

在这一点上，我开始认为位置访问不起作用，但如果是这样，我还能做什么

编辑2：解决了

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

var viewModel = {        
    selectedValuesProd0: ko.observableArray(),
    selectedValuesProd1: ko.observableArray(),
    selectedValuesProd2: ko.observableArray()
}

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);
    }))
}

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

---

我希望这能有所帮助

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

---

基本上，你不会通过建议的方式来节省任何工作。您可以像索引器一样，使“firstArray”和“secondArray”对人类不友好。虽然我不知道为什么这会是一个有价值的目标；我尽可能地追求可维护的代码。任何在您之后进入并看到多级索引器的人都不会欣赏您的聪明，也不会欣赏他们的头痛。

我建议您通过这样的下拉列表： {firstArray:[1,2,3]，secondArray:[4,5,6]}

---

基本上，你不会通过建议的方式来节省任何工作。您可以像索引器一样，使“firstArray”和“secondArray”对人类不友好。虽然我不知道为什么这会是一个有价值的目标；我尽可能地追求可维护的代码。任何在你后面看到多级索引器的人都不会欣赏你的聪明，也不会欣赏他们的头痛。

我意识到我从来没有结束过这个问题，所以我在这里添加了一个回答：

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

var viewModel = {        
    selectedValuesProd0: ko.observableArray(),
    selectedValuesProd1: ko.observableArray(),
    selectedValuesProd2: ko.observableArray()
}

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);
    }))
}

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

我意识到我从未解决过这个问题，因此我在这里添加了一个回答：

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

var viewModel = {        
    selectedValuesProd0: ko.observableArray(),
    selectedValuesProd1: ko.observableArray(),
    selectedValuesProd2: ko.observableArray()
}

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);
    }))
}

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

我认为您的上一条语句将计算为data bind=value:productProfiles[0][1]，这不是数组的求值，求值是data bind=value:productProfiles[0][1]。无论如何，即使您将更改方括号的顺序，这也无法正常工作。敲除数组不能是多维的。当然，您可以创建可观察数组中的可观察数组，但出于可维护性考虑，我建议不要这样做。考虑创建普通的VIEW模型，而不是使用多维数组。谢谢ARTEM的评论。因此，您建议为每一组下拉列表创建一个一维observableArray：这不是一个非常可维护的解决方案，但是，如果没有其他事情要做，我会尝试，谢谢！我认为您的上一条语句的计算结果是data bind=value:productProfiles[0][1]，这不是数组的求值，求值是data bind=value:productProfiles[0][1]。无论如何，即使您将更改方括号的顺序，这也无法正常工作。敲除数组不能是多维的。当然，您可以创建可观察数组中的可观察数组，但出于可维护性考虑，我建议不要这样做。考虑创建普通的VIEW模型，而不是使用多维数组。谢谢ARTEM的评论。因此，您建议为每一组下拉列表创建一个一维observableArray：这不是一个非常可维护的解决方案，但是，如果没有其他事情要做，我会尝试，谢谢！我忘了这个问题。最初，我的可观察数组是一个二维数组，因为我想独立于需要显示的产品数量和每个产品的属性数量。因为二维可观测阵列在

---

淘汰后，我不得不放弃产品数量的独立性，从而分裂成n个可观察数组，每个数组的长度等于每个产品的属性数量。所以没有真正的多级方法，每个可观察数组都是一维的，每个下拉菜单都包含选定的值。最初，我的可观察数组是一个二维数组，因为我想独立于需要显示的产品数量和每个产品的属性数量。由于二维可观测数组在淘汰中不起作用，我不得不放弃与产品数量的独立性，从而将其拆分为n个可观测数组，每个数组的长度与每个产品的属性数量相同。因此，没有真正的多级方法，每个可观察数组都是一维的，每个下拉菜单都包含选定的值。