我可以根据http://learn.knockoutjs.com/#/?tutorial=collections的指导填充我的选择列表框。然而,我面临两个问题。
- 所选索引偏移 1 我的年份选择列表不会选择任何索引。
我在这里放了一个小提琴:http: //jsfiddle.net/poundingCode/a9MGk/并将调用中的数据添加到我的服务器。
我发现最令人费解的是 BDay 和 BYear 控件实际上是相同的。与底层模型唯一不同的是 BYear 是一个可为空的数据类型,但我传入的值不是空的。
与往常一样,我们将不胜感激任何指导。
代码:`var Namespace = {};
// View model declaration
Namespace.initMemberVM = function (model) {
console.log('initViewCalled');
var memberViewModel = {
Id: ko.observable(model.Id),
BDay: ko.observable(model.Days[model.BDay]),
BMonth: ko.observable(model.Months[model.BMonth]),
BYear: ko.observable(model.Years[model.BYear]),
Company: ko.observable(model.Company),
FName: ko.observable(model.FName),
LName: ko.observable(model.LName),
Interests: ko.observable(model.Interests),
Married: ko.observable(model.Married),
MName: ko.observable(model.MName),
Name: ko.observable(model.Name),
SalutationId: ko.observable(model.SalutationId),
Salutation: ko.observable(model.Salutations[model.SalutationId]),
Months: ko.observableArray(model.Months),
Days: ko.observableArray(model.Days),
Years: ko.observableArray(model.Years),
Salutations: ko.observableArray(model.Salutations)
};
return memberViewModel;
};
1992"},{"Id":"1993"}],"Associations":"","BDay":2,"BMonth":2,"BYear":1983, "SalutationId":1, "FName": “James”,“MName”:“R”,“LName”:“Fleming”,“Interests”:“我想知道的是为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."}; 1992"},{"Id":"1993"}],"Associations":"","BDay":2,"BMonth":2,"BYear":1983, "SalutationId":1, "FName": “James”,“MName”:“R”,“LName”:“Fleming”,“Interests”:“我想知道的是为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."}; 想知道为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."}; 想知道为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."};
$(document).ready(function () {
var viewModel = Namespace.initMemberVM(data);
ko.applyBindings(viewModel);
});`
HTML
<article>
<h2>Summary</h2>
<label data-bind="text: FName"></label>
<table>
<tbody>
<tr><td>User Id</td><td colspan="4"><label data-bind="text: Name"></label></td></tr>
<tr>
<td>Salutation</td><td><select data-bind="options: Salutations, value: Salutation, optionsText: 'Name', optionsCaption: 'Select'"></select></td>
</tr>
<tr>
<td></td><td>First</td><td>Middle</td><td>Last</td>
</tr>
<tr>
<td>Name</td><td><input type="text" data-bind="value: FName"></td><td><input type="text" data-bind="value: MName"></td><td><input type="text" data-bind="value: LName"></td>
</tr>
<tr><td></td><td colspan="2">Month Day Year</td></tr>
<tr><td>DOB</td><td colspan="2">
<select name="BMonth" data-bind="options: Months, value: BMonth, optionsText: 'Name', optionsCaption: 'Select'"></select>/
<select name="BDay" data-bind="options: Days, value: BDay, optionsText: 'Id', optionsCaption: 'Select' "></select>
<select name="BYear" data-bind="options: Years, value: BYear, optionsText: 'Id', optionsCaption: 'Select'"></select>
</td><td> <label><input type="checkbox" data-bind="checked: Married">Married</label></td></tr>
<tr><td><label>Interests</label></td><td colspan="3"><textarea data-bind="value: Interests" rows="10" cols="40"></textarea></td></tr>
</tbody>
</article>