1

嘿伙计们，我目前正在学习教程和学习主干，但由于某种原因，除了主干模型之外，我什么都不能工作。在控制台中输入内容时，它下面的所有内容（例如集合或视图）似乎都没有响应。这是目前我的代码，我找不到任何问题，它在 JSLint 中验证。我注意到的一件事是视频来自主干的 1.0 更新之前。我正在使用翡翠进行布局，并将包括下面的代码。

更新：我现在正在处理这个。

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

})();

翡翠布局页面

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

翡翠索引页面

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
4

2 回答 2

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 工作，所以我不确定这将如何适合您的设置。

于 2013-07-06T16:54:14.513 回答
0

我认为问题出在这里：

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

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

首先，您的 UsersView.render 方法应该return this;允许使用该.render().el模式，UserView 会为集合中的每个模型创建和附加 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 );
于 2013-07-06T20:25:05.670 回答