2

是否可以在不更改上下文的情况下使用 foreach 绑定？

例如，这是我的模板：

<div data-bind="foreach:{data:users,as:'user'}">
  <div data-bind="template:{name:'userAvatar',data:user}"></div>
</div>

<div data-bind="template:{name:'userAvatar',data:currentUser}"></div>

<script type="text/template" id="userAvatar">
  <img data-bind="attr:{src:avatarUrl}">
</script>

所以我在foreach循环内部和外部使用模板'userAvatar'。现在我想在用户点击头像时执行一些操作。例如，我的模型是

var MyModel = function() {
  this.users = [
    {name:"user1",avatarUrl:"url1"},
    {name:"user2",avatarUrl:"url2"}
  ];
  this.currentUser = {name:"user3",avatarUrl:"url3"};
  this.openProfile = function() {
    // opening user profile
  }
}

这种情况下，如果我想在模板中调用“openProfile”操作，我必须在模板位于 foreach 之外时使用 $parent.openProfile，而在模板位于其中时使用 $parents[1].openProfile。

我可以将 openProfile 的链接复制到每个用户对象，或者在调用模板绑定时指定 openProfile 方法的位置，但是有更自然的解决方案吗？

PS 而且我不能使用 $root 变量，因为在现实世界中，我的 $root 位于这些模型的 10 层之上。

4

2 回答 2

3

我的重复绑定执行与 foreach 类似的操作，但不创建子上下文。

<div data-bind="repeat:users" 
    data-repeat-bind="template:{name:'userAvatar',data:$item()}"></div>

适用于您的示例的另一个选项（可能更好），因为它使用,template是foreach选项：template

<div data-bind="template:{name:'userAvater',foreach:users}"></div>
于 2013-02-13T21:09:46.233 回答
0

您可以将 users 数组转换为 Object 并在该对象中实现单击操作。

function User(name,avatarUrl) {
   var self = this;

   this.name = ko.observable(name);
   this.avatarUrl = ko.observable(avatarUrl);

   this.openProfile = function() {
      ....
   }
}


users = ko.observableArray([new User(...),new User(...)]);

我认为该动作自然属于用户模型而不是您的根模型。

于 2013-02-13T14:17:37.737 回答