Question

嘿伙计们我目前正在学习教程和学习骨干，但出于某种原因，除了Backbone模型之外我无法获得任何工作。在控制台中输入内容时，它下面的所有内容（例如集合或视图）似乎都没有响应。这是我目前的代码，我发现它没有任何问题，它在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

视图的render方法只会填写视图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工作客户端，所以我不确定这将如何适合您的设置。

Answer 2

我认为问题在于：

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

查看你的代码我希望附加一个App.Views.UsersView实例，并且要填充它 - 在上面的代码中你将{ model: User }推送到UserView实例的一个实例而不是UsersCollection的实例到UsersView的实例。

首先，您的UsersView.render方法应该return this;以便允许使用.render().el模式，UsersView处理为集合中的每个模型创建和附加UserView的实例，这样您就不需要再次担心这一点。

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);
    return this;
}

然后，以下内容对我来说：

var users_data=[{
    firstName: 'A',
    lastName: 'Person',
    email: 'a@knicks.com',
    phone: '212-424-6234',
    birthday: '03/05/1982',
    city: 'New York'
},
    firstName: 'Another',
    lastName: 'Person',
    email: 'another@knicks.com',
    phone: '212-424-6234',
    birthday: '03/05/1982',
    city: 'New York'
},
    firstName: 'A',
    lastName: 'Person',
    email: 'a@knicks.com',
    phone: '212-424-6234',
    birthday: '03/05/1982',
    city: 'New York'
}];

var users = new App.Collections.UsersCollection( users_data );
var usersView = new App.Views.UsersView( users );

$( document.body ).append( usersView.render().el );

收集和查看不在骨干脚本中工作？

2 个答案: