0

我正在使用骨干关系模型构建一个骨干应用程序（但这对于这个问题应该无关紧要）。

基本上，我有一个编辑按钮，它将显示一个隐藏的 div。在隐藏的 div id 内有一个子视图（称为DetailsView），它呈现表格元素以填充用户列表。我的模型（对于整个应用程序）大致如下所示：

{ 'id': 'foo',
  'users': 
   {
   'username': 'bobby',
   'password': 'peanuts'
   },
   {
   'username': 'sally',
   'password': 'watermellon'
   }
}

在我的主视图中（由上述模型的集合提供），当用户单击编辑按钮时，会触发：

edit: function(){
      var userModels = this.model.get('users'),
          detailViewContainer = this.$('tbody.users');
      console.log(name + ' has ' + userModels.length + ' models');
      //clear out eveything in tbody.users to prevent dupes
      detailViewContainer.html('');
      //check if there are actually user models
      if(userModels.length > 0){
        userModels.forEach(function(user) {
         var details = new DetailsView({model: user});
         details.render();
         detailViewContainer.append(details.el);
         });
}

代码异味来自我必须detailViewContainer明确声明这一事实。

最初，在我的 forEach 循环中，会调用视图中的另一个函数，其中包含声明和渲染DetailsView. 但是，我会失去this.

我的原始代码看起来像这样：

   edit: function() {
      var userModels = this.model.get('users'),
          detailViewContainer = this.$('tbody.users');
      console.log(name + ' has ' + userModels.length + ' models');
      //clear out eveything in tbody.users to prevent dupes
      detailViewContainer.html('');
      //check if there are actually user models
      if(userModels.length > 0){
        userModels.forEach(function(user) {
         this.renderDetailsView;
         });
      }
    },

    renderDetailsView: function(user) {
       var details = new DetailsView({model: user});
       this.$('tbody.users').append(details.render());
     },

在 中renderDetailsView，我会丢失上下文this并且无法将 附加DetailsView到正确的 DOM 元素（视图将附加到所有tbody.usersDOM 元素，因为this上下文变成了窗口，因为它处于循环中）。

必须明确声明 adetailsViewContainer对我来说似乎很麻烦，我希望能够保持this上下文指向主视图，而不是整个窗口。

模板只是一DetailsView组<tr><td></td></tr>元素。有没有更好的方法来嵌入这个视图而不必求助于创建detailViewContainer？

（一个可能的选择是DetailView循环遍历从this.model.get('users')所有返回的集合......这是个好主意吗？）

4

1 回答 1

2

如果您因为丢失“this”而正在做您正在做的事情，您可以将您的上下文传递给 forEach。

userModels.forEach(function(user) {
     this.renderDetailsView();
},this);

现在您可以使用适当的“这个”了。希望这可以帮助。

于 2012-07-31T20:13:32.857 回答