将2个可观察数组与knockout js链接在一起

时间:2012-04-10 18:05:51

标签: knockout.js

我有2个数组。一个是一个地区的所有学校,另一个是这些学校的所有学生的名单。学生对象包含他们所属的学校。我可以列出所有学校的名单,我可以列出所有学生的名单。我希望能够选择一所学校(或几所学校)并让学生名单只显示该学校的学生。

这就是我所拥有的(在CoffeeScript中):

ViewModel = () ->
    @accounts = ko.observableArray([])
    @players_to_teams = ko.observableArray([])
    @selected_players_to_teams = ko.observableArray([])
    @selected_schools = ko.observableArray([])
    null

查看:

<label for="school_selection">School</label>
<select id="school_selection" class="inline" multiple=true size="50" data-bind="options:accounts, optionsText: 'Name', selectedOptions: selected_schools"></select>


<div id="player_list" class="inline">
  <table class="table table-striped">
    <thead>
    <tr>
      <th id="firstName">First Name</th>
      <th id="lastName">Last Name</th>
      <th id="position">Position</th>
      <th id="teamName">Team Name</th>
      <th id="accountId">Account ID</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: selected_players_to_teams">
    <tr>
      <td data-bind="text: FirstName"></td>
      <td data-bind="text: LastName"></td>
    </tr>
    </tbody>
  </table>
</div>

selected_schools更改时,我需要更新selected_players_to_teams以仅包含selected_schools数组中包含学校的学生记录吗?

有没有办法链接observableArrays,使observableArrays成为函数,或者为observableArray捕获一个回调?

1 个答案:

答案 0 :(得分:2)

我建议将selected_players_to_teams实现为更新selected_schools时运行的ko.computed,并返回selected_schools的players_to_teams。

请参阅此jsfiddle以获取仅代码示例:http://jsfiddle.net/MqNPm/