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

Posted 2021-05-05

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

基本上，我有一个编辑按钮，将显示一个隐藏的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.users DOM元素，因为this上下文成为窗口，因为它处于循环中）。

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

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

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

答案

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

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

现在您可以使用正确的“此”。希望这可以帮助。