0

我是新的骨干.js 世界。我想使用backbone.js与服务器通信并将员工详细信息呈现到表上。我使用以下代码从服务器获取数据：

    var EmployeeCollection = Backbone.Collection.extend({
    model: Person,
    url:"http://localhost:4000/get/employee",
     parse : function(res) 
     {
         console.log('response inside parse' + res);
        return res;
     }

});

var employee = new EmployeeCollection();
employee.fetch();

在日志声明中我得到：response inside parse[object Object],[object Object],[object Object]

但我不知道接下来会发生什么。如何从我正在获取的对象中检索数据并将其呈现到表上。有人有建议吗？

4

2 回答 2

4

让我们假设您的 HTML 页面中有一个表格，id="employee"并且您已经定义了一个template对应于表格中的行的表格。为简单起见，我们假设员工行只有firstname和lastname：

<table id="employee">
  <thead>
    <tr><td>Firstname</td><td>Lastname</td></tr>
  </thead>
  <tbody>
  </tbody>
</table>
<script type="text/template" id="employee-template">
    <td><%= firstname %></td><td><%= lastname %></td>
</script>​

您需要两个views来渲染表格，一个来渲染表格中的每一行。它们可能看起来像：

//a (table) view to render the list of employees
var employee_list_view = Backbone.View.extend({
    el: $('#employee'),
    initialize: function() {
        this.collection.bind("add", this.render, this);
    },

    //this creates new rows in the table for each model in the collection
    render: function() {
        _.each(this.collection.models, function(data) {
            this.$el.append(new employee_view({
                model: data
            }).render().el);
        }, this);
        return this;
    }
});

//a (row) view to render each employee
var employee_view = Backbone.View.extend({
    tagName: "tr",
    template: _.template($("#employee-template").html()),

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

从服务器获取集合后，项目将存储在集合中。您可以使用以下代码查看检索到的数据。成功后，我们创建一个新的员工列表（在本例中为表）并传递员工集合。

var employee = new EmployeeCollection();

employee.fetch({
    success: function() {
        console.log(employee.toJSON());
        new employee_list_view({collection: employee}).render();
    },
    error: function() {
        console.log('Failed to fetch!');
    }
});

注意：建议使用成功/失败回调。

看看JSFiddle 上的这个工作版本

于 2012-10-30T12:12:28.520 回答
0

首先，如果您console.log以这种方式使用，您可以获得更多信息console.log('response inside parse', res);。res不会转换为字符串，但会显示为一个 JavaScript 对象及其所有属性和值。然后，检查backbone.js 文档Collection.parse并阅读res此上下文中的内容以及此方法应返回的内容。

下一步可能是创建一个使用您集合中的一些模板和数据呈现表格的视图。

于 2012-10-30T12:04:24.587 回答