Question

我有这个下拉控件：

<select class="form-control" 
        data-bind="attr: { id: 'prefix_' + $index() }, 
                   options: TeacherNames(), 
                   optionsValue: 'TeacherId', 
                   optionsText: 'TeacherName', 
                   optionsCaption: 'Choose Teacher', 
                   event: { change: $root.permissionChanged }">
</select>

然后我尝试通过以下方式设置下拉列表中的值：

item.TeacherNames = ko.computed(function() {
  return getTeacherList(item.OrderId);
});

function getTeacherList(orderId) {
  $.ajax({
    type: "POST",
    url: "/webservices/WebServiceTeacher.asmx/GetTeachersForMyAccount",
    contentType: "application/json; charset=utf-8",
    data: "{'Id': " + JSON.stringify(orderId) + "}",
    dataType: "json",
    success: function(data) {
      if (data.d) {
        return data.d;
      }
    },
    error: function(n) {
      alert('Error');
    }
  });
}

我能够从网络服务中获取教师数据，但我无法在选择列表中实际设置值。

选择控件是foreach绑定的一部分：

<!-- ko foreach: Orders -->
<div class="row">
  <div class="col-md-12 m-t-20">
    <hr class="blue" />
  </div>
  <div class="col-md-12">
    <div class="row order-gray-bk col-wrap">
      <div class="col-lg-9 col-md-9 n-m-t m-r-10 p-t-10 p-b-10">
        <div class="row">
          <div class="col-sm-2 col-xs-4 n-p">
            Teacher:
            <select class="form-control" 
                    data-bind="attr: { id: 'prefix_' + $index() }, 
                               options: TeacherNames(), 
                               optionsValue: 'TeacherId', 
                               optionsText: 'TeacherName', 
                               optionsCaption: 'Choose Teacher', 
                               event: { change: $root.permissionChanged }">
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /ko -->

在每个订单的foreach循环中触发对Web服务的调用：

ko.utils.arrayForEach(data.d, function(item) {
  item.TeacherNames = ko.computed(function() {
    return getTeacherList(item.OrderId);
  });
  self.Orders.push(item);
});

Answer 1

你把事情搞混了。 form适用于视图模型的某些部分，这些模型会根据视图模型的其他部分而变化。计算出的中的函数被触发每时间Knockout认为必须重新评估computed 。

相反，请使用这样的常规observableArray：

computed

然后在方便的时间（页面加载，或当用户切换到页面上的某个选项卡，或者orderId更改时，或者......）填充该数组时：

item.TeacherNames = ko.observableArray([]);

作为一个具体示例，如果您想在orderId（假设为function getTeacherList(orderId) { $.ajax({ url: "/webservices/WebServiceTeacher.asmx/GetTeachersForMyAccount", data: "{'Id': " + JSON.stringify(orderId) + "}", dataType: "json", success: function(data) { item.TeacherNames(data.TeacherNames); } }); }）更改时刷新教师姓名：

observable

作为一个脚注，一个计算的可观察量将很好，例如用于显示已排序的列表：

item.orderId.subscribe(function(newVal) {
  if (newVal !== item.orderId()) {
    getTeacherList(newVal);
  }
});

如果您更改了相关的item.sortedTeacherNames = ko.computed(function() { return item.TeacherNames().sort(); });可观察数组，sortedTeacherNames将自动更新。

PS。如果TeacherNames是TeacherNames或computed，您可以observableArray（没有括号），因为KO知道如何在数据绑定中处理这些类型。

knockoutjs绑定项目列表到下拉列表

1 个答案: