javascript - 我如何将接收到的数组传递给下划线模板

Question

我从 PHP 获得了一个包含各种数据对象的长数组。

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

我将呈现数据的主干 View 是

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

我的 workHTML 将由 Underscore 呈现

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

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

Answer 1

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

Backbone's Model用于管理单个对象并处理与 API 的通信(GET、POST、PATCH、PUT请求)。

Backbone's Collection Angular 色是处理模型数组，它处理获取它(GET 请求应该返回一个对象的 JSON 数组)并且默认情况下它还将每个对象解析为一个主干模型。

不要硬编码 jQuery ajax 调用，而是使用 Backbone 集合。

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

然后，模块化您的 View 。为您收到的数组的每个对象制作一个项目 View 。

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

然后你的 ListView 看起来像这样:

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 是不常见的，您应该将职责范围限定在正确的位置。

路由器可能是这样的:

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

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

然后，如果你想看到工作页面:

var myRouter = new Router();

Backbone.history.start();

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

模板和 RequireJS

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.

我建议使用 text require.js plugin并像这样为 View 加载每个模板:

work-item.js 文件:

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 文件:

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