Question

说我有一群运动员。我显示他们的名字，当点击一个名字时，我想发布更多细节。但这意味着我必须检索关联模型。

所以我有一个模型，一个集合，然后是两个视图，一个负责渲染每个单独的名称，另一个管理这些名称的列表。然后我将创建一个视图来显示被点击的运动员的详细信息。

但我无法弄清楚如何检索关联模型。如果我将我的事件放在管理列表的视图中，它会在单击时触发，但是会出现错误，指出模型未定义。

如果事件侦听器位于呈现每个单独名称的视图中，则它在单击时不会执行任何操作。

这是我的代码：

的index.html

<script id="nameListTemplate" type="text/template">
    <%= first %> <%= last %>
</script>
<script id="contactTemplate" type="text/template">
    <ul>
    <li><%= first %></li>
    <li><%= last %></li>
    <li><%= age %></li>
    <li><%= sport %></li>
    <li><%= category %></li>
    </ul>
</script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>

<script src="js/models/sportsManModel.js"></script>
<script src="js/collections/sportsMenCollection.js"></script>
<script src="js/views/nameView.js"></script>
<script src="js/views/nameListView.js"></script>
<script src="js/app.js"></script>

<ul id="sportsMenName"></ul>

<div id="sportsManDetails"></div>

sportsManModel.js

var app = app || {};

app.SportsManModel = Backbone.Model.extend({});

sportsMenCollection.js

var app = app || {};

app.SportsMenCollection = Backbone.Collection.extend({
    model: app.SportsManModel
});

nameView.js

var app = app || {};

app.NameView = Backbone.View.extend({
    tagName: 'li',
    className: 'sportsMan',
    template: _.template($('#nameListTemplate').html()),

    /*events: {
        'click .sportsMan': 'showSportsManDetails'
    },
    // here it doesn't work at all
    showSportsManDetails: function(e){
        alert(this.model.get('first'));  
    },*/

    render: function(){
        this.$el.append(this.template(this.model.attributes));

        return this;
    }
});

nameListView.js

var app = app || {};

app.NameListView = Backbone.View.extend({
    el: '#sportsMenName',

    initialize: function(sportsMen){
        this.collection = new app.SportsMenCollection(sportsMen);
        this.render();
    },

    /*events: {
        'click .sportsMan': 'showSportsManDetails'
    },
    // here it says that this.model is undefined
    showSportsManDetails: function(e){
        alert(this.model.get('first'));  
    },*/

    render: function(){
        this.collection.each(function(sportsMen){
            this.renderContact(sportsMen);
        }, this)
    },

    renderContact: function(sportsMen){
        var nameView = new app.NameView({
            model: sportsMen   
        });
        this.$el.append(nameView.render().el);
    }
});

Answer 1

第一个问题是您拥有li.sportsMen元素的视图，因此您根本不需要在事件中使用类.sportsMen。

第二个问题，您点击事件showSportsManDetails的方法名称错误，但应该是showContactDetail，因为您拥有showContactDetail方法或将方法名重命名为showSportsManDetails。

app.NameView = Backbone.View.extend({
...
    events: {
        'click': 'showSportsManDetails'
    },

    showSportsManDetails: function(e){
        alert(this.model.get('first'));  
    },

以下是一个工作示例http://jsbin.com/yutaduvokehu/1/edit

Answer 2

我认为问题可能在于范围，请尝试在nameView中添加此初始化函数：

initailize : function(){
   _.bindAll(this,'showContactDetail');
}

骨干获取点击元素的模型

2 个答案: