骨幹：視圖中的視圖列表

讓我先顯示我需要的內容，以便您瞭解我的問題。我有這樣一個聯繫人視圖：骨幹：視圖中的視圖列表

ContactView = Backbone.View.extend({ 
    template: _.template("Name: <%= name %> 
          E-mail: <%= email %> 
          Phones 
          <%= label1 %> - <%= number1 %> 
          <%= label2 %> - <%= number2 %>"), 
    render: function() { 
     var contact = this.template(this.model.toJSON()); 
     this.$el.html(contact); 
    } 
});

到目前爲止好，問題是，手機的部分是一個列表，我的模型擁有手機的數組，我需要把它動態地在該模板。

我的想法是創建另一個模型，並查看Phone和PhoneView。然後在ContactView我將創建一個方法render_phones，如：

render_phones: function() { 
    var phones = this.model.get('phones'); 
    var phones_str = ""; 
    for (var i in phones) { 
     var phone = new Phone(phones[i]); 
     var phoneView = new PhoneView({model: phone}); 
     phones_str += phoneView.render(); 
    } 
    return phones_str; 
}

我改變了ContactView模板這樣：

template: _.template("Name: <%= name %> 
         E-mail: <%= email %> 
         Phones 
         <%= phones %>"),

但如何讓我的渲染方法得到的電話列表呈現並放在模板裏面？

我找不到處理這種情況的模式。代碼開始看起來不太好。

ps：這只是一個例子，我的應用程序還有其他幾個部分，我需要這個，這個視圖需要在列表中生成子視圖。

來源

2012-06-26 Maximiliano Guerra

我的意思是，渲染方法已經有：this.template（this.model.toJSON（））; 我將不得不使電話字符串成爲模型的一部分，因此它可以在模板中顯示。但那樣做會非常醜陋，我認爲這種做法不正確。 –

看起來您正在使用underscore.js呈現模板，underscore.js爲模板中的rendering a collection提供了一種方法（請參閱第二個示例）。例如

template: _.template("Name: <%= name %> 
          E-mail: <%= email %> 
          Phones 
       <% _.each(phones, function (phone) { %> 
       <%= label %> - <%= number %> 
       <% }); %>"),

您也可以渲染一個單獨查看每個模型，並在同一渲染模型修改el以使其出現，但除非你需要的視圖（例如內容會改變，或者你聽事件）可能不會這樣做。這裏是你如何能做到這

render: function() { 
    this.$el.html(this.model.toJSON()); 
    _.each(this.model.get('phones'), function(phone) { 
    this.$el.find('.phoneArea').append(new phoneView({model: phone}).render().el)); 
    },this); 
    return this; 
}

此外，如果你走這條路線則請注意，它可能會付出緩存的意見，但同樣如果你需要的是呈現內容，那麼它會爲例可能只需將電話號碼保存爲一個數組並將其呈現在模板中即可。

來源

2012-06-26 14:30:47 Jack

非常感謝你的男人！我使用了第一個例子，因爲我發現它是更短，更優雅的方式，很好！ –

很高興爲您提供幫助，正如我所提到的，除非您有理由使用第二種方法，否則第一種方法可能會更好。 – Jack

骨幹：視圖中的視圖列表

回答

相關問題