使用knock out在每个循环中获取Drop down事件

时间:2017-04-22 18:54:56

标签: knockout.js

以下是示例代码   我需要在Pages中显示客户详细信息。我在UI中显示的客户详细信息不是单个记录。对于每个客户,我试图在表格中显示详细信息。在每个客户表中,我需要显示分页。以下是用于显示每个客户的示例代码。对于分页,我有一个下拉按钮和一个下一个按钮。因为当下拉值改变时,我需要显示该特定客户的下一组。问题是我无法在每个循环中获得Dropdown事件。

<ul class="pager">
    <li><span>
      <input type="button" class="btn dsg-back-btn" value="" title="Previous Page">
    </span></li>
    <li><span>
      <select class="queueQuery" data-bind="options: TablePageSize, optionsText: 'PageId', optionsValue: 'QueueId', optionsCaption: 'Select'">
        <option value="">Select</option>
        <option value="b66bc105-337c-4e5c-aead-6493a3ace358">1</option>
        <option value="b66bc105-337c-4e5c-aead-6493a3ace358">2</option>
        <option value="b66bc105-337c-4e5c-aead-6493a3ace358">3</option>
      </select></span></li>
    <li><span>
      <input type="button" class="btn btn-sm dsg-next-btn" value="" title="Next Page"></span></li>
  </ul>

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您需要在选择列表值更改时更新您的客户详细信息列表。使用具有可观察属性的选择列表上的value绑定并订阅该observable,可以为您提供捕获下拉更改并在视图模型中加载新数据的方法。

JS:

var val = ko.observable();
val.subscribe(function (newVal) {
  // load new data into observable array bound to your list view
});

HTML:

<select class="queueQuery" data-bind="options: TablePageSize, optionsText: 'PageId', optionsValue: 'QueueId', optionsCaption: 'Select', value: val">