javascript - 主干 Json View 模板

标签 javascript jquery backbone.js underscore.js

我现在只是想集中精力。

所以我有了模型,用集合加载 JSON 文件,但是我无法找出在下划线模板的 View 中显示数组的最佳方式。

我很累,似乎已经阅读了很多教程,所有教程都通过不同的方式通过 View 将数据输出到模板。有正确的方法吗?我猜它应该与 _.each 循环?我是否走在正确的道路上? ;)

请参阅下面的代码。

非常感谢

<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>

最佳答案

如果您想将集合传递到模板,可以执行以下操作:

1:在您的 View 中定义新集合。将一些模型添加到您的收藏中。我们将其定义为 this.collection ,我们假设在渲染时集合中有多个模型。

2:将对象传递到模板中。创建一个以“collection”为键、以 JSON 化的集合(模型数组)为值的对象:

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

3:现在,在模板中,我们可以使用 <%= collection %> 引用该集合。 。但是,我认为您想要循环遍历集合以呈现值。在 HTML 模板中,您可以使用下划线的 _.each 创建循环。 :

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

这将打印集合中的模特列表,假设您的模特有 id和一个name属性。

另一种更“ Backbone ”的方法是为集合中的每个模型创建一个新 View ,类似于本教程中的待办事项:http://arturadib.com/hello-backbonejs/ .

关于javascript - 主干 Json View 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20622637/

相关文章:

javascript - MVC 如何从 html 触发其他服务器上的操作

javascript - Alexa 跳过插槽还是以编程方式设置?

javascript - jQuery 附加 html 问题

node.js - 将 Jquery UI 与express.js 结合使用

javascript - 如何使用 Google 标签管理器和 Google Analytics 跟踪 anchor 链接?

javascript - HTML5 代码在 Firefox 中不起作用

javascript - 发布/重定向/获取并向用户发出警报?

jquery - 我在 .NET Core 中的 ajax 调用中收到 xsr.send 错误 400

javascript - 碰撞数组无法正常工作javascript

backbone.js - 在与服务器同步之前是否有等效的解析使用?