0

私はついにRailsTodoListアプリを入手してBackboneのレンダラーを使用してTodoを表示できるようになりました。でも小さな問題があります。addOne関数では、チュートリアルで教えられたview.render（）。elの代わりにview.render（）を使用しました。

ビューはview.render.el（）ではレンダリングされません。説明はありますか？

$(function(){
Todos = new TodoList.Collections.Todos;
TodoList.Views.TodoView = Backbone.View.extend({
    tagName: "li",
    events: {},
    initialize: function(){},
    template: _.template('<li> <%= task %></li>'),
    render: function(){
        var todo = this.model.toJSON();
        return this.template(todo);
    }
});

TodoView = TodoList.Views.TodoView;

TodoList.Views.AppView = Backbone.View.extend({
    el: $("#todo_app"),
    events: {
        "submit form#new_todo": "createTodo"
    },
    initialize: function(){
        _.bindAll(this, 'addOne', 'addAll','render');
        Todos.bind("add", this.addOne);
        Todos.bind("reset", this.addAll);
        Todos.bind("all", this.render);
        Todos.fetch();
    },

    addOne: function(todo){
        var view = new TodoView({model: todo});
        this.$("#todo_list").append(view.render());
    },

    addAll: function(){
        Todos.each(this.addOne);
    },

    newAttributes: function(event){
        var new_todo_form = $(event.currentTarget).serializeObject();
        return {
            dog: {
                name: new_todo_form["todo[task]"],
                age: new_todo_form["todo[done]"]
            }
        };
    },

    createTodo: function (e){
        e.preventDefault();
        var params = this.newAttributes(e);
        Dogs.create(params);
    }
});
});
4

2 に答える 2

2

呼び出しのconsole.log各コンポーネントにアクセスすると、出力は次のようになります。

view // your view object which contains methods and properties - BackboneView
render  // a method of the view object - a function
el // a property of the view object - an HTMLElement

elしたがって、これは単なるプロパティであり、実際にはHTMLElementオブジェクトであるため、呼び出すことはできません。あなたのコードでは、returning html. view.render().el を介して呼び出しをチェーンする場合は、thisキーワードを使用してインスタンスを返す必要があります。を返すと、のすべてのプロパティとメソッドに再び 1 行でinstanceアクセスできます(連鎖可能性)。instanceそのため、戻ったときhtmlにビュー オブジェクトをチェーン オフすることはできません。そのため、デモでは が返されthisます。

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

とにかく、ビューの html を返すべきではありません。elまたは$elプロパティを介して Backbone の html に常にアクセスする必要があります。

于 2012-06-21T12:34:25.883 に答える
1

el関数ではなく、ビューを構成するHTMLです。通常、呼び出すrender()とHTMLが生成され、elプロパティに保存されます。慣例により、このメソッドはthis、オブジェクトを直接（および連鎖のために）参照できるようにする必要があります。

したがって、view.render().el要素をレンダリングし、DOMへの追加に適したHTMLを返します。

于 2012-06-21T12:08:57.860 に答える