Question

function MyViewModel() {
  var self = this;
  this.addPerson = function () {
    this.PersonIdList.push(0);
  }

  this.showSecondSection = ko.computed(function() {
    // need logic here?
  }, this);

  this.PersonIdList = ko.observableArray();
  this.PeopleChoices = ko.observableArray([
    {
      "Id": 1,
      "Name": "Person A"
    },
    {
      "Id": 2,
      "Name": "Person B"
    },
    {
      "Id": 3,
      "Name": "Person C"
    },
  );
}


<!-- ko foreach: PersonIdList -->
<div class="container" style="margin-bottom: 5px;">                
  <select id="idList" data-bind="options: $root.PeopleChoices, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '-- Please Select --', value: ??"></select>                                                             
</div> 
<div data-bind="visible: showSecondSection">Hi</div>
<!-- /ko -->
<a href="javascript:void(0);" data-bind="click: addPerson">Add person</a>

我想知道我是否可以将此块数据绑定到PersonIdList中的项目？另外，如果Id = 3，我可以在循环内部创建第二个div容器吗？

Answer 1

如果我理解正确，你有一个可观察到的ID，你绑定到foreach。在每个<div>中，您都有一个绑定到PeopleChoices数组的选择选项列表（下拉列表）。并且您希望将PersonID的当前迭代绑定到下拉列表的值？

我不确定你想要的结果是什么，或者你为什么要这样做。有可能，有点儿。我不确定在下拉列表中选择新选项会发生什么。我猜想什么都不会发生，什么都没发生。这是fiddle。

您所要做的就是将绑定值设置为$data，如下所示：

<select id="idList" data-bind="options: $root.PeopleChoices, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '-- Please Select --', value: $data"></select>

在personIdList的每次迭代中，$ data设置所选的值，但是一旦更改了选择，就不会发生任何事情，因为observableArray充满了静态数据。所以我想，如果他们是可观察的呢？所以我更新了fiddle，虽然它至少会更新observable中的值，但事实并非如此。

所以是的，你可以，但这很奇怪。不知道你为什么要这样做。

更新：可以执行this之类的操作。

Answer 2

http://jsfiddle.net/4Dv3y/1/

以这种方式看看亚当。我认为这是一个更清晰的解决方案，你正在使用observables，你也可以使用像showValue这样的属性来显示你想要的跨度。这更像是你应该如何在Knockout中使用observable，当你在这样的JavaScript中使用强大的对象时，你不想依赖索引。

<div data-bind="with: selectedPerson">
The name of the person that is selected is : <span data-bind="text: Name"></span>
<h4 data-bind="visible: ShowHighlight">OMG SECOND PERSON IS SHOWN!</h4>
</div>

knockout.js data-bind下拉列表值到数组索引 - 是否可能？

2 个答案: