javascript - 主干获取点击元素的模型

Question

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

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

但我不知道如何检索关联模型。如果我将事件放在管理列表的 View 中，它会在单击时触发，但会出现错误，表明模型未定义。

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

这是我的代码:

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 元素的 View ，因此您根本不需要在事件中使用 .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