node.js - 集合和 View 在 Backbone 脚本中不起作用？

Question

大家好，我目前正在学习教程和学习 Backbone ，但由于某种原因，除了 Backbone 模型之外，我无法使用任何其他东西。在控制台中输入内容时，其下面的所有内容(例如集合或 View )似乎都没有响应。这是目前我的代码，我找不到任何问题，并且它在 JSLint 中验证。但我注意到的一件事是该视频来自主干 1.0 更新之前。我使用 Jade 进行布局，并将包含下面的代码。

更新:我现在正在处理这个问题。

    (function(){
    //app can be the name of the project/app
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Templates: {},
        Routes: {}

    };
    window.template = function (id) {
        return _.template($('#' + id).html());
    };

    //Can get rid of the Collection and views out of the names of each
    //User Model
    App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'J.R.',
            lastName: 'Smith',
            email: 'jsmith@knicks.com',
            phone: '212-424-6234',
            birthday: '03/05/1982',
            city: 'New York'

        },


        location: function(){
            return this.get('firstName') + ' ' + this.get('lastName') + 'is currently in ' + this.get('city') + '.';
        }

    });

    // list of users

    App.Collections.UsersCollection = Backbone.Collection.extend({
        model: App.Models.User

    });

    //User View
    App.Views.UserView = Backbone.View.extend({
    tagName: 'li',

    events: {
        'click .edit':
    },


    template: template('userTemplate'),

    initialize: function() {
        this.render();
    },

    render: function() {
        var template = this.template(this.model.toJSON());
        this.$el.html(template);
        return this;
        //always return this on render methods
    }

    }); 

    // view for users
    App.Views.UsersView = Backbone.View.extend({
        tagName: 'ul',

        initialize: function() {

        },

        render: function() {
            this.collection.each(function(user) {
                //user is the model associated to the new created user
                var userView = new App.Views.UserView({model: user});
                this.$el.append(userView.el);
            }, this);
        }
    });

    var userView = new App.Views.UserView({model: User});
    $(document.body).append(userView.render().el);

})();

Jade 布局页面

doctype 5
html
    head
        title=title
        link(rel='stylesheet', href='/css/style.css', type='text/css')
        link(rel='stylesheet', href='/css/bootstrap-responsive.css')
        link(href='/css/bootstrap.css', rel='stylesheet', type='text/css')
        link(href='/css/font-awesome.min.css', rel='stylesheet', type='text/css')
        script(src='/js/jquery.min.js', type='text/javascript')
        script(src='/js/jquery.validate.min.js', type='text/javascript')
        script(src='/js/script.js', type='text/javascript')
        script(src='/js/underscore.min.js', type='text/javascript')
        script(src='/js/backbone.min.js', type='text/javascript')
    body
        div#container
            div#header
            block content 
            include footer

Jade 索引页

extends layout

block content
    h1= title
    p Welcome to #{title}
    script(src='/js/main.js', type='text/javascript')
    script(id='userTemplate', type='text/template')
    <%=firstName%>
    button.edit Edit
    <%=lastName%>
    button.edit Edit
    <%=email%>
    button.edit Edit
    <%=phone%>
    button.edit Edit
    <%=birthday%>
    button.edit Edit
    <%=city%>
    button.edit Edit

Answer 1

View 的render方法只是填充 View 的 el ，其他人必须添加 el到人们将看到的页面。您正在使用tagName在您看来:

tagName: 'li'

这仅仅意味着 Backbone 将创建一个 <li>正如您的看法 el ，这并不意味着 <li>会被添加到任何东西中。通常的模式是 render返回this :

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

然后无论是谁打电话 render可以添加el到类似这样的页面:

var userView = new UserView({model: user});
$(whatever).append(userView.render().el);

我在客户端进行 Backbone 工作，因此我不确定它如何适合您的设置。