javascript - 使用 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);
  }
});