Question

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

基本上，我有一个显示隐藏div的编辑按钮。隐藏div div中的一个子视图（称为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.users DOM元素，因为this上下文成为循环中的窗口。

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

DetailsView模板只是一组<tr><td></td></tr>元素。是否有更好的方法来嵌入此视图而无需求助于创建detailViewContainer？

（一个可能的选择是DetailView循环通过this.model.get('users')从{{1}}返回的集合...这是一个好主意吗？）

Answer 1

如果你因为失去'this'而正在做你正在做的事情，你可以将你的上下文传递给forEach。

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

现在您可以使用正确的'this'。希望这会有所帮助。

Backbone js代码味道 - 更好的嵌入子视图的方法？

1 个答案: