Question

我真的很擅长骨干，并且背后有一个混乱的世界。现在我正在尝试使用collection.get（）方法渲染单个人的视图，最好不要遍历整个集合。

以下是用户集合：

<div class="gallery_container">
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="first_image image">
    <br>
    <span class="img_date first_image image">Text</span>
  </div>
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
</div>

用户模型：

App.Collections.UserCollection = Backbone.Collection.extend({
    url: "/users",
    model: App.Models.User,

    initialize: function(){
        console.log('users collection');
    },

});

用户视图（所有用户）：

 App.Models.User = Backbone.Model.extend({
        rootURL: '/users',
        initialize: function(){
            console.log('User model being generated');
        }

    });

和viewUser视图（单个用户）：

App.Views.Users = Backbone.View.extend({
        el: "body",
        model: 'user',

        initialize: function(){
            console.log('User view rendering');
            this.collection.fetch();
            this.listenTo(this.collection, 'reset', this.addAll);
        },
        clearDiv: function(){
            var container = $('#render-area');
            $('body').removeClass('homepage');
            $('#main-nav').fadeIn(100);
            container.empty();
            this.addUser();
        },
        addUser: function(){
            var current_user_model = this.collection.get(currentUser);
            var user = new App.Views.ViewUser({ model: current_user_model });
            $('#render-area').append(user.el);
        },

        events: {
            'click #view-profile' : 'clearDiv'
        }

});

我认为我在“用户”视图中抓取单用户模型，并使用这些行将其传递给ViewUser视图

App.Views.ViewUser = Backbone.View.extend({

        initialize: function(){
            console.log("single user view");
            this.template = HandlebarsTemplates['user_profile'];
            this.render();
        },  
        render: function(){
            $('#render-area').html(this.template(this.model.toJSON()));
        },
});

但似乎我不是。感谢任何帮助和/或解释，谢谢！

Answer 1

你检查this.collection.get是否返回一个对象？也许它无法获取currentUser？

在渲染视图之前，你应该

a）在调用视图并呈现＆＃34;未找到＆＃34;之前检查模型是否为有效模型。查看或 b）在视图中检查模型是否有效并呈现＆＃34;未找到＆＃34;视图 c）或者你可以在把手模板中处理它

示例A（未经测试）：

var current_user_model = this.collection.get(currentUser);
if (current_user_model) {
    var user = new App.Views.ViewUser({ model: current_user_model });
} else {
    new AppViews.ViewUserNotFound();
}

例B：

App.Views.ViewUser = Backbone.View.extend({

        initialize: function(){
            console.log("single user view");
            this.template = HandlebarsTemplates['user_profile'];
            this.templateNotFound = HandlebarsTemplates['user_profile_not_found'];
            this.render();
        },  
        render: function(){
            if(this.model) {
                $('#render-area').html(this.template(this.model.toJSON()));
            } else {
                $('#render-area').html(this.templateNotFound());
            }
        },
});
var current_user_model = this.collection.get(currentUser);
var user = new App.Views.ViewUser({ model: current_user_model });

示例C：

App.Views.ViewUser = Backbone.View.extend({

        initialize: function(){
            console.log("single user view");
            this.template = HandlebarsTemplates['user_profile'];
            this.templateNotFound = HandlebarsTemplates['user_profile_not_found'];
            this.render();
        },  
        render: function(){
            if(!this.model) {
                this.model = new this.model(); // create model with defaults
            }
            $('#render-area').html(this.template(this.model.toJSON()));
        },
});
var current_user_model = this.collection.get(currentUser);
var user = new App.Views.ViewUser({ model: current_user_model });

所有未经测试的例子......

希望这有点帮助，最好的卡斯滕

Answer 2

我会这样做：

App.Views.Users = Backbone.View.extend({
        el: "body",
        model: 'user',

        initialize: function(){
            console.log('User view rendering');
            this.listenTo(this.collection, 'reset', this.addAll);
        },
        clearDiv: function(){
            var self = this;
            this.collection.fetch({
               success: function() {
                   var container = $('#render-area');
                   $('body').removeClass('homepage');
                   $('#main-nav').fadeIn(100);
                   container.empty();
                   self.addUser();
               }
            });
        },
        addUser: function(){
            var current_user_model = this.collection.get(currentUser);
            var user = new App.Views.ViewUser({ model: current_user_model });
            $('#render-area').append(user.el);
        },

        events: {
            'click #view-profile' : 'clearDiv'
        }

});

无法读取属性＆＃39; toJSON＆＃39;未定义的+骨干

2 个答案: