如何将接收到的数组传递给下划线模板 [英] How do i pass a received array into underscore template

问题描述

我从PHP获得了一个长数组，其中包含各种数据对象.

I am getting a long array from PHP containing various data objects.

[{"commid":"1","uid":"0","pid":"3","comment":"comm","parid":null,"date":"2016-10-27 15:03:10"},
{"commid":"2","uid":"0","pid":"10","comment":"Ana","parid":null,"date":"2016-10-27 15:03:51"},
{"commid":"3","uid":"0","pid":"5","comment":"asss!","parid":null,"date":"2016-10-27 15:05:50"},
{"commid":"4","uid":"0","pid":"10","comment":"Lawl?","parid":null,"date":"2016-10-27 17:03:59"},
{"commid":"5","uid":"0","pid":"14","comment":"sd","parid":null,"date":"2016-11-06 00:25:04"},
{"commid":"6","uid":"0","pid":"14","comment":"sds","parid":null,"date":"2016-11-06 00:25:50"},
{"commid":"7","uid":"0","pid":"14","comment":"WOW!","parid":null,"date":"2016-11-08 15:06:18"},
{"commid":"8","uid":"0","pid":"13","comment":"Hello!?","parid":null,"date":"2016-11-08 15:14:30"}] 

将呈现数据的我的骨干网视图

My Backbone View which will be rendering the data is

var WorkPage = Backbone.View.extend({
    el: $('#indexcontent'),
    render: function() {
        Backbone.history.navigate('work');
        var _this = this;

        this.$el.html(workHTML);
        $.ajax({
            type: "GET",
            url: "includes/server_api.php/work",
            data: '',
            cache: false,
            success: function(html) {
                console.log(html);
                var compiledTemplate = _.template($('#content-box').html(), html);
                _this.$el.html(compiledTemplate);
            },
            error: function(e) {
                console.log(e);
            }
        });
        return false;
    }
});

由Underscore呈现的我的workHTML是

My workHTML which will be rendered by Underscore is

<script type="text/template" id="content-box">
<div class="workhead">
    <h3 class="msg comment"><%= comment%></h3>
    <p class="date"><%= date%></p>
</div>
</script>
<div id="content-box-output"></div>

如何在这里实现下划线循环?

How do I implement a underscore loop here?

推荐答案

您应该利用Backbone的功能.为此，您需要了解如何将REST API与Backbone结合使用.

You should take advantage of Backbone's features. And to do that, you need to understand how to use a REST API with Backbone.

主干模型 用于管理单个对象并处理通信使用API​​(GET，POST，PATCH，PUT请求).

主干的收藏 角色是处理模型数组，它处理提取它(GET请求应返回对象的JSON数组)，并且默认情况下还将每个对象解析为骨干模型.

Backbone's Collection role is to handle an array of model, it handles fetching it (GET request that should return a JSON array of objects) and it also parse each object into a Backbone Model by default.

使用Backbone集合，而不是对jQuery ajax调用进行硬编码.

Instead of hard-coding a jQuery ajax call, use a Backbone collection.

var WorkCollection = Backbone.Collection.extend({
    url: "includes/server_api.php/work",
});

然后，将您的视图模块化.为收到的数组的每个对象创建一个项目视图.

Then, modularize your views. Make an item view for each object of the array you received.

var WorkItem = Backbone.View.extend({
    // only compile the template once
    template: _.template($('#content-box').html()),
    render: function() {

        // this is how you pass data to the template
        this.$el.html(this.template(this.model.toJSON()));

        return this; // always return this in the render function
    }
});

然后您的列表视图如下:

Then your list view looks like this:

var WorkPage = Backbone.View.extend({
    initialize: function(options) {
        this.itemViews = [];
        this.collection = new WorkCollection();

        this.listenTo(this.collection, 'reset', this.render);

        // this will make a GET request to
        // includes/server_api.php/work
        // expecting a JSON encoded array of objects
        this.collection.fetch({ reset: true });
    },
    render: function() {
        this.$el.empty();
        this.removeItems();
        this.collection.each(this.renderItem, this);
        return this;
    },

    renderItem: function(model) {
        var view = new WorkItem({
            model: model
        });
        this.itemViews.push(view);
        this.$el.append(view.render().el);
    },
    // cleanup to avoid memory leaks
    removeItems: function() {
        _.invoke(this.itemViews, 'remove');
        this.itemViews = [];
    }

});

在render函数中设置url是不寻常的，您应该将职责限定在正确的位置.

It's unusual to set the url in the render function, you should keep the responsibilities scoped to the right place.

路由器可能类似于:

var Router = Backbone.Router.extend({
    routes: {
        'work': 'workPage'
    },

    workPage: function() {
        var page = new WorkPage({
            el: $('#indexcontent'),
        });
    }
});

然后，如果您想查看工作页面:

Then, if you want to see the work page:

var myRouter = new Router();

Backbone.history.start();

myRouter.navigate('#work', { trigger: true });

模板和RequireJS

我的index.html页面包含此内容 indexcontent div但包含模板的content-box 我们正在编译的格式存储在不同的work.html中.所以， 如果我没有在主index.html中加载此work.html，我将无法 访问content-box.

My index.html page contains this indexcontent div but the content-box which contains the template format which we are compiling is stored in different work.html. So, if i dont load this work.html in my main index.html i am unable to access content-box.

我建议使用文本require.js插件，并为视图加载每个模板，例如这个:

I would recommend to use the text require.js plugin and load each template for the view like this:

work-item.js文件:

The work-item.js file:

define([
    'underscore', 'backbone',
    'text!templates/work-item.html',
], function(_, Backbone, WorkItemTemplate) {
    var WorkItem = Backbone.View.extend({
        template: _.template(WorkItemTemplate),
        /* ...snip... */
    });
    return WorkItem;
});

work-page.js文件:

The work-page.js file:

define([
    'underscore', 'backbone',
    'text!templates/work-page.html',
], function(_, Backbone, WorkPageTemplate) {
    var WorkPage = Backbone.View.extend({
        template: _.template(WorkPageTemplate),
    });
    return WorkPage;
});

这篇关于如何将接收到的数组传递给下划线模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！