Question

我有一个模板，它绑定到一个淘汰赛observableArray。我正在尝试只显示数组中第一项的内容。删除第一个项目后，成为第一个项目的下一个项目应显示此部分。它应该类似于以下代码。关键是isFirst函数。

HTML

<div data-bind="template: { name: 'my-template', foreach: people }"></div>
<script type="text/html" id="my-template">
    <div>
        <span data-bind="visible: isFirst">The first person is </span>
        <span data-bind="text: name"></span>
    </div>
</script>
<button data-bind="click: removeFirst">Remove First</button>

视图模型

function Person(p,name,age) {
   this.parent = p;
   this.name = name;
   this.age = age;
   this.isFirst = ko.computed(function(){
       return this.parent.people.indexOf(this) === 0;
   });
}
var viewModel = function() {
   var self = this;
   self.people = ko.observableArray();
   self.people.push(new Person(self, 'Fred', 25));
   self.people.push(new Person(self, 'Joe', 15));
   self.people.push(new Person(self, 'Sally', 21));
   self.people.push(new Person(self, 'Ann', 37));
   self.people.push(new Person(self, 'Jack', 52));

   self.removeFirst = function () {
          people.splice(0, 1);
      }
   };   
};

Answer 1

由于您处于foreach binding的上下文中，因此您可以利用“注意2：使用$ index，$ parent和其他上下文”链接中详述的$index属性特性“

您有两种不同的选择。

使用无容器if binding仅为第一个元素呈现标记，类似于此question
中的讨论
```

 <span>The first person is</span>

```
继续使用visible绑定为每个元素呈现标记，但只能在第一个项目上显示
```
<span data-bind="visible: $index() == 0">The first person is </span>
```

对于这种特殊情况，选项＃1是更合适的方法。

修改：将其保存在viewmodel中：

我将isFirst移到$ root中，然后更改绑定。因为，我们已经$index你可以在

<!-- ko if: $root.isFirst($index) -->

-

 self.isFirst = function(index){
  return 0 === index();
}

或者与原始方法类似：

<!-- ko if: $root.isFirst($data) -->

-

self.isFirst = function(item){
  return 0 === self.people.indexOf(item);
}

确定项是否是observableArray中的第一项

1 个答案: