Verwenden von jQuery.load zum Anzeigen einer Vorlage in einer anderen Vorlage

Question

Ich bekomme 2 Vorlagen: eine für ein Formular und eine für eine Zeile für das Ergebnis. So ist meine Sichtweise. Das Formular wird angezeigt, aber wenn ich eine Zeile habe, bekomme ich nur eine statische Vorlage dieser Zeile, ich meine, die <% = key %> funktioniert nicht und das Formular verschwinden.

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 ist asynchron. Sie müssen damit umgehen. Außerdem sollten Sie die Vorlage zwischenspeichern, sobald sie geladen ist, als zu versuchen, die gleiche Vorlage wiederholt zu holen. Versuchen Sie etwas wie folgt:

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); 
    } 
});