javascript - Backbone.js - 如何包含外部 HTML 片段

Question

我的文件系统中有预渲染的 HTML 片段。是否可以在 backbone.js 中加载 HTML 片段？我正在寻找类似于 Angular.js

的 ng-include 的东西

例如，在我的文件系统(frag.html)中

<h1>I'm a fragment</h1>

应注入(inject)到模板的给定占位符位置

<div id="ph">
   <!-- INJECTED -->
   <h1>I'm a fragment</h1>
</div>

Answer 1

假设我们有这个占位符:

<div id="ph"></div>

frag.html 文件中的 HTML:

<div>
    <h1>I am</h1>
    <span>an HTML fragment</span>
</div>

让我们使用 jQuery 函数 load 使用特殊的 render 方法来定义自定义 PrerenderedView里面:

window.PrerenderedView = Backbone.View.extend({
  render: function() {
    this.$el.load(this.options.ajax_template_path, _.bind(this.onRender, this));
    return this;
  },
  onRender: function() {
    // do some stuff here, for example
    var h1 = this.$('h1');
    var text = this.model.get('some_value');
    setTimeout(function() {
      h1.text(text);
    }, 2000);
  }
});

在实例化 PrerenderedView 时，我们应该传递一个选项 ajax_template_path(在我们的例子中是“frag.html”)。

$(function() {
  new window.PrerenderedView({
    el: $('#ph'),
    model: new Backbone.Model({some_value: 'It was'}),
    ajax_template_path: 'frag.html'
  }).render();
});

当然，我们不会忘记 Same Origin Policy如果我们要在没有服务器的情况下工作。例如，我们可以使用标志“--allow-file-access-from-files”启动 chrome。