为什么视图不使用.el渲染? [英] Why would views not render with .el?

问题描述

我终于有了Rails Todo List应用程序，可以使用Backbone的渲染器显示Todos.我有一个小问题.在addOne函数中，我使用的是view.render()而不是view.render().el，这是本教程中讲授的内容.

I've finally got my Rails Todo List app to display the Todos using Backbone's renderer. I've a small issue though. In the addOne function, I've used view.render() instead of view.render().el, what was taught in the tutorial.

该视图无法使用view.render.el()进行渲染.有什么解释吗?

The view doesn't render with view.render.el(). Any explanation?

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

推荐答案

如果要 console.log ，则调用的每个组件都将类似于以下内容:

If you were to console.log each of the components of the call the output would be similar to the following:

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 对象.在您的代码中，您正在返回html .如果要通过view.render().el链接调用，则必须使用 this 关键字返回实例.返回 instance 时，您可以在一行中再次访问 instance 的所有属性和方法(可链接性).因此，当您返回 html 时，您无法链接视图对象，这就是为什么在演示中，他们返回 this 的原因.

So, you can't call el because it's only a property, in fact it's an HTMLElement object. In your code you are returning html. If you were to chain the the calls via view.render().el you would have to return the instance using the this keyword. When you return an instance you get access to all of the instance's properties and methods again in one line (chainablility). So, when you return html you can't chain off the view object, which is why, in the demo, they return this.

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

无论如何，您都不应该返回视图的html.您总是想通过 el 或 $ el 属性访问Backbone的html.

You shouldn't return the html of the view anyway. You always want to access Backbone's html via the el or $el properties.

这篇关于为什么视图不使用.el渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！