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

Backbone js code smell - better way to embed a sub-view?

本文关键字：视图 更好 方法 代码 js Backbone      更新时间：2024-06-17

我正在使用主干关系模型构建一个主干应用程序（但这对这个问题来说并不重要）。

基本上，我有一个编辑按钮，它将显示一个隐藏的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对我来说似乎很难，我希望能够使this上下文指向主视图，而不是整个窗口。

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

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

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

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

现在你有了合适的"这个"。希望这能有所帮助。

相关文章：