使用jQuery.load在另一個模板中顯示模板

Question

我得到2個模板：一個用於表單，另一個用於行的結果。這是我的觀點。表單正在顯示，但是當我有一個行時，我只會得到該行的一個靜態模板，我的意思是<% = key %>不起作用，窗體消失。

APP.FromFront = Backbone.View.extend({ 
    el: $("#content"), 
    events: { 
     "click #addLink" : "addLink", 
     "click .deleteLink" : "deleteLink" 
    }, 
    template: _.template($('#content').html()), 

    initialize: function() { 
     this.bookmarks = new APP.BookmarksCollection(); 
     this.render(); 
    }, 
    render: function() { 
     this.$el.html(this.$el.load("../../templates/form_template.html")); 
     this.bookmarks.each(function(bookmark) { 
      var bookJSON = bookmark.toJSON(); 
      **//############ this is where it's doesn't work** 
      var temp=_.template(this.$el.load("../../templates/links_template.html")); 
      $("#links").append(temp(bookJSON)); 
     },this); 
    }, 
}) 

Answer 1

load是異步的。你需要這樣處理。您也應該在模板加載後緩存模板，而不是嘗試重複獲取相同的模板。嘗試如下：

APP.FromFront = Backbone.View.extend({ 
    el: $("#content"), 
    events: { 
    "click #addLink": "addLink", 
    "click .deleteLink": "deleteLink" 
    }, 
    initialize: function() { 
    this.bookmarks = new APP.BookmarksCollection(); 
    this.formTemplatePromise = $.get("../../templates/form_template.html"); 
    this.linkTemplatePromise = $.get("../../templates/links_template.html"); 
    $.when(this.formTemplatePromise, this.linkTemplatePromise) 
    .then(function(formTemplate, linkTemplate) { 
     this.formTemplate = _.template(formTemplate); 
     this.linkTemplate = _.template(linkTemplate); 
     this.render(); 
    }.bind(this)); 
    }, 
    render: function() { 
    this.$el.html(this.formTemplate(/* form data here? */)); 
    var links = []; 
    this.bookmarks.each(function(bookmark) { 
     // below code can be made a 1 liner, I split it for readability 
     var bookJSON = bookmark.toJSON(); 
     var link = this.linkTemplate(bookJSON); 
     links.push(link); 
    }, this); 
    // Single append instead of many for performance 
    $("#links").append(links); 
    } 
});