我正在使用 KnockoutJS 和 durandalJS 2.0 。我动态根据数据库表条目添加两个下拉列表,并使用另一个表中的数据填充它们。每个下拉列表还有一个复选框。如何获取所选的下拉值?
模型
var dataToAdd = {
mydata_Id: ko.observable(),
mydata_Name: ko.observable(),
mydata_data: ko.observableArray([dataTask])
};
var dataTask = {
taskId: ko.observable(),
dropdownId: ko.observable()
};
var taskList=ko.observableArray([]);//get data from database table. Consider there are two entries.
var dropdownData=ko.observableArray([]); //get the dropdown data
查看
//Since *taskList* has two entries, two dropdowns with their respective checkbox will get generated.
<div data-bind="foreach:taskList">
<label><input type="checkbox" data-bind="checked: true" />
<span data-bind="text:Name"></span></label>
<select data-bind="options: $root.DropdownData, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select...', value: $root.dataTask.dropdownId</select>
</div>
首先:当我点击ADD
按钮时,如何获取每个下拉列表的选定值?当我使用值$root.dataTask.dropdownId
时,两个下拉列表都会更改为相同的选定值。当我勾选复选框时,应启用下拉列表,选择后,我应该可以更新observable
数组,如下所示:
{taskId:44,dropdownId:10},{taskId:55,dropdownId:11}
第二次:此外,当我取消选中复选框时,相应的下拉菜单应被禁用,并且应该从observable
数组中重新输入该条目。
答案 0 :(得分:4)
你的问题有很多不确定性,不过我已经包含了一个工作小提示,展示你在寻找什么 -
<div data-bind="foreach: Dropdowns">
<label><input type="checkbox" data-bind="checked: checkedObs" />
<span data-bind="text: label"></span></label>
<select data-bind="disable: checkedObs, options: theseOptions, optionsText: 'Name', optionsCaption: 'Select...', value: selectedOption"></select>
</div>
<button data-bind="click: addButton">Add</button>
简而言之,您可以做的是创建模型的实例,例如&#39; dropdown&#39;在这种情况下,使用Knockout的foreach绑定来渲染n
个数量。下拉列表的实例包含执行您要查找的内容的可观察对象,可以在add
函数中用于决定是写入值还是w / e