javascript - Backbone js 代码味道 - 嵌入 subview 的更好方法？

Question

我正在使用 Backbone 关系模型构建一个 Backbone 应用程序(但这对于这个问题来说并不重要)。

基本上，我有一个编辑按钮，它将显示一个隐藏的 div。在隐藏的 div id 内部有一个 subview (称为 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 循环中会调用 View 中的另一个函数，该函数包含声明和渲染 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 元素( View 将附加到所有 tbody.users DOM 元素，因为 this 上下文成为窗口，因为它处于循环中)。

必须显式声明 detailsViewContainer对我来说似乎很老套，我希望能够保留 this上下文指向主视图，而不是整个窗口。

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

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

Answer 1

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

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

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