1

我已经关注了无数的屏幕截图，并广泛地搜索了主干文档，但我无法弄清楚为什么我的视图事件没有被触发。我的（短）测试代码如下：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/backbone.min.js"></script>

<script type="text/javascript">
    
    var App = (function($){
        
        var NavigationItemView = Backbone.View.extend({
            el: '#navigation',
            initialize: function(params){
                this.label = params.label;
                this.appendTo = params.appendTo;
            },
            events: {
                "click #add" : "test"
            },
            test: function(){
                $(this.el).html("<li>Testing...</li>");
            },
            render: function(){
                $(this.el).html("<li><a href=\"#\">"+this.label+"</a></li>");
            }
        })
        
        var self = {};
        self.init = function(){
            new NavigationItemView({ label: 'Test Nav Label' });
        }
        
        return self;
    });
    
    $(document).ready(function(){
         App(jQuery).init();
    })
    
</script>

如果我从这里更改 init 方法代码：

new NavigationItemView({ label: 'Test Nav Label' })

对此：

new NavigationItemView({ label: 'Test Nav Label' }).render()

完美调用了 render 方法，表明视图的设置没有问题。我可以替换render()为test()它同样有效。

但是，单击 ID 为 #add 的链接的事件甚至不会触发测试，而且肯定应该如此吗？澄清一下，我在 DOM 中确实有一个 ID 为“add”的链接，我已经检查并再次检查。

如果我使用 jQuery 添加事件钩子并手动触发视图的某些方法，那就可以了。它的主干自己的事件挂钩对我不起作用。

我查看了相关帖子，大多数建议都是使用我拥有的el属性。在我的情况下#navigation是空的。<ul>我已将其更改为 div 但行为没有变化。

非常感谢所有帮助。

4

1 回答 1

3

您的#add 元素是您的视图元素（#navigation）的子元素吗？事件仅在您查看“el”的子元素上触发。例如，这将不起作用：

<div id="navigation">
    ...
</div>

<div id="add">
    ...
</div>

虽然这将：

<div id="navigation">
    ...
    <div id="add">
        ...
    </div>
    ...
 </div>
于 2012-03-27T11:03:37.833 回答