在主干中获取JSON到下划线模板(Getting JSON in to Underscore Template in Backbone)

在主干中获取JSON到下划线模板(Getting JSON in to Underscore Template in Backbone)

刚刚开始使用Backbone并且仍然了解这些细节。

我试图简单地使用Underscore和Backbone显示一些JSON。 我能够使它使用Underscore和$ .getJSON工作，但是当我尝试与Backbone进行连接时，根据我的尝试，我得到各种错误。

我也可以通过对模型中的值进行硬编码来让Backbone工作，但是当我尝试将它们结合在一起时，我正在跑到墙上。 任何帮助表示赞赏。

这是我的Underscore模板：

<script type="text/html" id='trailTemplate'> <% _.each(trails,function(trail){ %> <%= trail.trailname %><br /> <% }); %> </script>

这是我的主干代码：

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" } ]

Just getting started with Backbone and still making sense of the ins and outs.

I'm trying to simply display some JSON using Underscore and Backbone. I'm able to make it to work just using Underscore and $.getJSON, but when I try to wire it up with Backbone I get a variety of errors depending upon what I try.

I've also been able to get Backbone to work by hardcoding values in to the model, but I'm running in to a wall when I try to bring it all together. Any help is appreciated.

Here is my Underscore template:

<script type="text/html" id='trailTemplate'> <% _.each(trails,function(trail){ %> <%= trail.trailname %><br /> <% }); %> </script>

And here is my Backbone code:

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

And in case you need it, here is 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" } ]

最满意答案

你的trails.json文件包含一个包含2个对象的数组，它们都代表一个'Trail'。 所以你应该有一个集合'Trails'而不是一个模型

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

下划线模板函数有两种使用方式：

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

现在你使用的方式是数字2（你声明模板的方式）和数字1（你如何在渲染中使用它）。 让我们来看看模板声明：

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

在你尝试赋予它data属性之前，这一切都很好。 首先， 您不需要在此处提供数据 ，您只需创建可在View呈现时评估的模板函数。 其次，你试图通过data的东西根本不是你想象的那样。

trail.fetch()不会返回提取结果，它会返回使用fetch进行的ajax调用的ajax句柄。 谢天谢地，Backbone被制作出来，所以你不必考虑所有这些痛苦的ajax东西，而是你可以相信Backbone发出的事件。 因此， 甩出Backbone Catalog o'Events并检查reset

“重置” （集合，选项） - 集合的全部内容被替换时。

这是你收集的事件发生后的事件（ 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

希望这可以帮助！

Your trails.json file contains an array with 2 objects, which both represent a single 'Trail'. So you should have a collection 'Trails' instead of a single model

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

The underscore template function can be used in 2 ways:

_.template(templateString) - compiles the templateString into function that can be evaluated when necessary _.template(templateString, data) - compiles and immediately evaluates the template with the given data

Now the way you are using is number 2 (the way you declare the template) combined with number 1 (how you use it inside render). Let's examine the template declaration:

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

This is all good up until the point you try to give it the data -attribute. First of all you don't need to give the data at this point, you just want to create the template function that can be evaluated when the View renders. Second, the stuff you are trying to pass as data is not at all what you think it is.

trail.fetch() doesn't return the the fetch results, it returns the ajax handle for the ajax call that is made with fetch. Thankfully Backbone is made so you don't have to think about all this painful ajax stuff, but instead you can trust the events that Backbone emits. So whip out the Backbone Catalog o' Events and check out reset

"reset" (collection, options) — when the collection's entire contents have been replaced.

This is the event you collection will emit, after fetch (also sync, i think). Before this event is emitted, your collection will be empty, so there is no point in doing anything with it before hearing this reset event. So let's bring it all together now:

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

Hope this helps!