骨干Json视图模板

Question

I am just trying to get my head around backbone at the moment. 我现在正试图让我的头围绕骨干。

So i have the model, load the JSON file with the collection however i cant finger out the best way of displaying the array in the view to the underscore template. 所以我有模型，加载JSON文件与集合，但我无法指出在视图中显示阵列到下划线模板的最佳方式。

I'm quite tired and seem to of gone through alot of tutorials, all with different ways of outputting this data through the view to the template. 我很累，似乎经历了很多教程，都有不同的方式通过视图输出这些数据到模板。 Is there a correct way of doing this? 这样做有正确的方法吗？ i'm guessing it should be looping with _.each? 我猜它应该用_.each循环？ am i even on the correct path ? 我甚至在正确的道路上？ ;) ;）

Please see code below. 请参阅下面的代码。

Many thanks 非常感谢

<head>




</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>


    <script type="text/javascript">

        var News = Backbone.Model.extend();

        var Newscollection = Backbone.Collection.extend({
            model: News,
            url: 'data.js'
        });

        var NewView = Backbone.View.extend({
            el: '#News',
            template: _.template($("#NewsTemplate").html()),

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


    </script>


    <div id="News"></div>


    <script id="NewsTemplate" type="text/template">
        <%= title %>
    </script>

</body>

Answer 1

If you'd like to pass the collection to your template, you can do the following: 如果您想将集合传递给模板，可以执行以下操作：

1: Define new collection in your view. 1：在视图中定义新集合。 Add some models to your collection. 在您的收藏中添加一些模型。 We'll define it as this.collection , and we'll assume there are multiple models in the collection by the time it gets rendered. 我们将它定义为this.collection ，我们假设在渲染时集合中有多个模型。

2: Pass the an object into the template. 2：将对象传递到模板中。 Make an object with 'collection' as the key and the JSON-ized collection (an array of models) as the value: 使用'collection'作为键和JSON化的集合（模型数组）作为值来创建一个对象：

$(this.el).html(this.template({'collection': this.collection.toJSON()}));

3: Now, in the template, we can reference the collection by using <%= collection %> . 3：现在，在模板中，我们可以使用<%= collection %>来引用该集合。 However, I think you want to loop through the collection to render values. 但是，我认为您想循环遍历集合以呈现值。 In your HTML template, you can create a loop using underscore's _.each : 在HTML模板中，您可以使用下划线的_.each创建循环：

    <ul>
    <% _.each(collection, function(item) { %>
        <li> <%= item.id %> : <%= item.title %> </li>
    <% }); %>
    </ul>

This will print a list of your models in the collection, assuming your models have an id and a name attribute. 这将在集合中打印模型列表，假设您的模型具有id和name属性。

Another, more 'backbone-ish' method of doing this would be to create a new view for each model in the collection, similar to the todo items in this tutorial: http://arturadib.com/hello-backbonejs/ . 另一个更“骨干式”的方法是为集合中的每个模型创建一个新视图，类似于本教程中的todo项目： http ： //arturadib.com/hello-backbonejs/ 。

骨干Json视图模板

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-12-16 23:44:25

骨干Json视图模板

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-12-16 23:44:25

解决方案1
2 已采纳 2013-12-16 23:44:25