嵌套在另一個模板中的骨幹模板

是否可以將模板嵌套在模板中並通過骨幹視圖進行訪問？嵌套在另一個模板中的骨幹模板

例如我有View1使用Template1和View2使用Template2。 Template2實際上需要位於Template1中的DIV中。我將template2的DIV容器放在template1中，並帶有適當的id，但不顯示何時呈現頁面。如果我從Template1中刪除Template2 div容器，並將其放入頁面主體中，它就可以正常工作。

所以只是想知道這是否可能，或者如果我必須嵌套的意見/模型等，使這項工作？

Template2中的數據在技術上與Template1沒有關係，只是需要顯示在Template1中嵌入的頁面的某個位置上。

來源

2012-05-18 mbr1022

你能分享一些代碼嗎？ –

我知道這並不回答你的問題，但Ember js支持接近這個的東西。您可以定義嵌套的資源...哪種類型可以讓您在模板中嵌套模板。 http://emberjs.com/guides/routing/defining-your-routes/ –

我過去處理這個問題的方法是分別定義兩個視圖，然後在渲染View1時創建一個新的View2並將其渲染到View1中。所以：

window.View1 = Backbone.View.extend({ 
    render: function() { 
     this.view2 = new View2(); 
     this.$('insert-view-here').append(this.view2.render().el); 
    } 
});

來源

2012-05-18 21:13:11 RTigger

這工作，謝謝。 – mbr1022

在這種情況下，你如何處理內部元素的變化？你是否總是從頭到尾渲染內部元素以某種方式改變自己？ –

第二個視圖可以處理內部元素的更改，就像您在其他任何情況下處理它們一樣。如果出於某種原因，父視圖或模型發生變化並且需要重新渲染html，則將在此渲染方法內重新創建子視圖。 – RTigger

按照我的理解，典型的方法是將視圖看作是可以嵌套在一起的完整對象。假設您有兩個視圖，ViewA和ViewB。以下代碼顯示瞭如何將ViewB附加到ViewA中。

# this is coffeescript, but it's easily translated to JS 
class ViewA extends Backbone.View 
    initialize:() -> 
     this.render() 

    render:()-> 
     this.$el.append(new ViewB().$el) 
     this.$el.append(new ViewB().$el) 
     return this

你可以得到花哨ViewB的管理方式（將其分配給性質或其他）或通過不同的構造函數的參數到每個ViewB實例。

來源

2012-05-18 21:17:19

您應該爲此創建子視圖。

我喜歡在關閉中私有化子視圖並返回公共視圖。

var View = (function (BV) { 
    var View, Subview; 

    // Only this main view knows of this subview 
    Subview = BV.extend({ 
     template: _.template(subtmpl), 

     render: function() { 
      this.$el.html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    View = BV.extend({ 
     template: _.template(tmpl), 

     render: function() { 
      this.$el.html(this.template(this.model.toJSON())); 

      var subview = new SubView({ model: this.model }); 

      // replace a div in your template meant for teh subview with the real subview 
      this.$el.find("#subview").replaceWith(subview.render().el); 

      return this; 
     } 
    }); 

    return View; 

}(Backbone.View)); 

var view = new View({ model: user }); 
var subview = new Subview; // Reference Error

來源

2012-05-18 23:36:46 Trevor

另一種選擇，當你需要包括內模板1則Template2多次這是有用的，說作爲一個<ul>內<li>元素，是通過一則Template2功能爲模板1。（來自Rico Sta Cruz' Backbone Patterns。）

TasksList = Backbone.View.extend({ 
    // Template1, inlined in js. 
    template: _.template([ 
    "<ul class='task_list'>", 
     "<% items.each(function(item) { %>", 
     "<%= itemTemplate(item) %>", 
     "<% }); %>", 
    "</ul>" 
    ].join('')), 

    // Template2, inlined in js. 
    itemTemplate: _.template(
    "<li><%= name %></li>" 
), 

    render: function() { 
    var html = this.template({ 
     items: tasks /* a collection */, 
     itemTemplate: this.itemTemplate 
    }); 

    $(this.el).append(html); 
    } 
});

來源

2013-06-29 17:46:06 ericsoco

，而不需要的jQuery append()或涉及一個雙jQuery的範圍的附加子視圖對象的更貧溶液，是預先渲染/預編譯嚴格使用下劃線方法，並插入子視圖作爲字符串，在主模板中使用內部註釋標籤。

View = Backbone.View.extend({ 
    template: _.template(...), 
    prerender: function(tpl,model){// pre-render a component 
     var template = _.template(tpl); 
     return template(model); 
    }, 
    render: function(){ 
    var model = { ... }; 
    var component = this.prerender(this.itemTemplate, model); 
    this.$el.html(this.template(model).replace('<!--#component-->', component)); 
    } 
});

如果您的模板不是一個常量，並且取決於當前範圍的屬性，那麼它尤其有用。

注意到對於這個問題的範圍，您必須將View2模型傳遞給組件。

來源

2016-01-16 22:13:53 hexalys

嵌套在另一個模板中的骨幹模板

回答

相關問題