Knockout JS设置可观察数组对象属性值的下拉列表的初始值

时间:2015-11-16 22:11:48

标签: knockout.js binding

我正在创建会议出席管理员,并且信息正在保存到我们的数据库中。我的登录表单中有一个名为“Attendee Type”的下拉选择列表,其中包含从名为attendeeTypes的可观察数组中填充的值。参加者类型填充表单中的对象
{Id:1,姓名:“父母”} {Id:2,姓名:“职员”}等。

现在,我的表中的行也是通过在一个可观察数组上运行foreach来动态创建的,meetAttendees。

会议与会者
self.meetingAttendees = ko.observableArray([{ AttendeeTypeId: ko.observable(1),<br> AttendeeNames: ko.observableArray([{ Name: "Marlin" }, { Name: "Dory" }]),<br> AttendeeSiteNumber: ko.observable(40), <br>StudentNames: ko.observableArray([{ Name: "P. Sherman" }, { Name: "42 Wallaby Way" }, { Name: "Sydney" }]), <br>Email: ko.observable("test@test.com"), <br>Telephone: ko.observable("559-222-5555") }

如您所见,表中的每一行都有一个attendeeTypeId。如果预先填充此值,就像它在这里一样,我希望下拉列表切换到适当的值。这有助于在发生刷新时保留数据。

我的Html:
<table class="table table-responsive table-condensed table-bordered table-striped"> <thead> <tr> <th class="attendeeTypeCol">Attendee Type</th> <th class="attendeeNameCol">Attendee Name(s)</th> <th class="schoolNameCol">School Name</th> <th class="studentNameCol">Student Name</th> <th class="emailCol">E-Mail Address</th> <th class="telephoneCol">Telephone Number</th> </tr> </thead> <tbody data-bind="foreach: $root.meetingAttendees"> <tr> <td class="attendeeTypeCol"> <select style="margin-right: 15px;" data-bind="options: $root.attendeeTypes, optionsText: 'Name',value: $root.meetingAttendees()[$index()].AttendeeTypeId,optionsValue: 'Id', optionsCaption: 'I am a(n)...'"> </select> <span data-bind="text:$index()"></span> <span data-bind="text:$root.meetingAttendees()[$index()].AttendeeTypeId()"></span> </td> ... </tr> </tbody> </table>

我有两个调试范围,因此我总能看到$ root.meetingAttendees()[$ index()]的值.AttendeeTypeId()。当我从下拉列表中选择一个值时,该值会更新并相应地更改,因此我确信它正在查找正确的位置,但在初始加载时,值绑定不会将下拉列表设置为适当的选项。它实际上是将变量设置为默认的'undefined'。

有没有人对如何将下拉列表设置为$ root.meetingAttendees()[$ index()]中Id的相应值有任何想法.AttendeeTypeId()?

1 个答案:

答案 0 :(得分:0)

这个问题的答案就是评论中所说的内容。

感谢Quango验证。

对于敲除边界选择列表,必须在应用绑定之前填充列表。

我的AJAX调用在绑定之前没有完成,因此我的列表绑定observable被设置为默认值“undefined”。

通过使用$ .ajax({})。done( - call function--)完成AJAX调用后,将绑定包装在函数中并调用此函数,这可以保证在绑定之前填充列表应用了。

正如Quango所说,如果列表是静态的,那么最好在HTML中注入选项,但这对动态加载的列表很有用。

  

“是的,在绑定列表和绑定值时要小心绑定顺序 - 我也跳过它。必须在绑定值之前填充列表。如果没有,列表为空,则值被设置为undefined。有许多不同的方法可以解决这个问题 - 它取决于列表是静态的还是动态的。对于静态列表,如果可能的话,你可以将值注入HTML。如果是动态列表,一种方法是传递与模型数据相同的AJAX调用中的值,因此viewmodel同时具有列表和数据。“ - Quango