将JSON导入Backbone中的下划线模板

Question

刚刚开始使用Backbone并且仍然能够理解这些细节.

我试图使用Underscore和Backbone简单地显示一些JSON.我能够使用Underscore和$ .getJSON使其工作,但是当我尝试使用Backbone连接时,我会遇到各种错误,具体取决于我的尝试.

我也已经能够通过硬编码将模型中的值变为Backbone来工作,但是当我尝试将它们整合在一起时,我正在跑到墙上.任何帮助表示赞赏.

这是我的下划线模板:

<script type="text/html" id='trailTemplate'>

    <% _.each(trails,function(trail){ %>

        <%= trail.trailname %><br />

    <% }); %>

</script>

这是我的Backbone代码:

var Trail = Backbone.Model.extend({
    urlRoot: "trails.json"
});

var trail = new Trail({});

var TrailView = Backbone.View.extend({
    el: '.page',

    template: _.template($("#trailTemplate").html(), {trails:trail.fetch()}),

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

var trailView = new TrailView({
    model: trail
});

trailView.render();

如果你需要它,这里是trails.json

[
        {
            "trailhead": "Bear Lake",
            "trailname": "Bear Lake",
            "distance": ".5",
            "gain": "20",
            "level": "easy"
        },

        {
            "trailhead": "Bear Lake",
            "trailname": "Nymph Lake",
            "distance": ".5",
            "gain": "225",
            "level": "fairly easy"
        }
]

Answer 1

您的trails.json文件包含一个包含2个对象的数组,这两个对象都代表一个"Trail".所以你应该有一个集合'Trails'而不是一个模型

var Trails = Backbone.Collection.extend({
  url: '/trails.json'
});

var trails = new Trails();

下划线模板功能可以以两种方式使用:

1. _.template(templateString) - 将templateString编译为可在必要时进行评估的函数
2. _.template(templateString,data) - 使用给定数据编译并立即评估模板

现在你使用的方式是数字2(你声明模板的方式)和数字1(你如何在渲染中使用它).我们来看一下模板声明:

template: _.template($("#trailTemplate").html(), {trails:trail.fetch()})

这一切都很好,直到你试图给它data-attribute.首先,您不需要在此时提供数据,您只需要创建可在View呈现时进行评估的模板函数.其次,你试图传递的东西data完全不是你想象的那样.

trail.fetch()不返回获取结果,它返回使用fetch进行的ajax调用的ajax句柄.值得庆幸的是Backbone是这样的,所以你不必考虑所有这些痛苦的ajax东西,而是你可以信任Backbone发出的事件.所以掀起Backbone目录o'事件并检查reset

"reset"(集合,选项) - 当集合的全部内容被替换时.

这是你的集合将在fetch之后发出的事件(sync我也认为).在发出此事件之前,您的收藏将是空的,因此在听到此reset事件之前没有必要对其进行任何操作.所以现在让我们把它们结合在一起:

var TrailView = Backbone.View.extend({
  el: '.page',

  template: _.template($("#trailTemplate").html()), // no data attribute here

  initialize: function() {
    this.collection.on('reset', this.render);  // render after collection is reset
    this.collection.fetch();  // fetch the collection from the trails.json file
  }

  render: function(){
    // evaluate the template here
    this.$el.html(this.template(this.collection.toJSON())); 
    return this;
  }
});

var trailView = new TrailView({
  collection: trails
});

// trailView.render(); <- No need for this, because it will render itself

希望这可以帮助!