Backbone JS代碼味道 - 嵌入子視圖的更好方法？

Question

我正在使用骨幹關係模型構建骨幹應用程序（但對於這個問題應該不重要）。

基本上，我有一個編輯按鈕，將顯示一個隱藏的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？

（一種可能的選擇是具有貫穿全部由自己從this.model.get('users')返回集合DetailView環......這有什麼好主意嗎？）

Answer 1

如果你做你因爲失去做什麼'this'，你可以將你的上下文傳遞給forEach。

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

現在你有適當的'this'給你。希望這可以幫助。