0

私はbackbone.jsの世界に不慣れです。バックボーン.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テーブルをレンダリングするために1つ、テーブルの各行をレンダリングするために1つが必要です。それらは次のようになります。

//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 docs Collection.parseを確認しres、このコンテキストで何が行われ、このメソッドが何を返すかを確認します。

おそらく次のステップは、コレクションのテンプレートとデータを使用してテーブルをレンダリングするビューを作成することです。

于 2012-10-30T12:04:24.587 に答える