Question

通过backbone.js视图的基础教程。

预期的行为是在单击#sayhello按钮时调用render函数。渲染只是使用jQuery的html方法将“hello Bud Abbot”放入el。

但是当我点击#sayhello按钮时，没有任何反应。没有错误或任何东西。我在firebug中设置了一个断点，并观察它只是跳过渲染功能。

这是js：

App = (function($){
jQueryView = Backbone.View.extend({
    initialize: function(){
        this.el = $(this.el);
    }
});

HelloWorldView = jQueryView.extend({
    el: $('#helloworld'),
    events:{ 'click #sayhello': 'render'
    },
    initialize: function(params){
        jQueryView.prototype.initialize.call(this);
        this.name = params.name;
    },

    render: function(){
        console.log("rendering");
        this.el.html("hello " + this.name);
    }
});

var self = {};
self.start = function(){
    new HelloWorldView({name: 'Bud Abbot'});
};
return self;

});

这是html：

    <div id="helloworld"></div>
<button id="sayhello">Say Hello</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

当我改变这一点时，似乎很奇怪：

new HelloWorldView({name: 'Bud Abbot'});

到此：

new HelloWorldView({name: 'Bud Abbot'}).render();

调用render方法，但是当我尝试使用事件时 - 没有骰子。非常感谢任何帮助，以了解我做错了什么。

Answer 1

这是因为#sayhello不是你观点的一部分。尝试将#sayhello放在#helloworld：

中

<div id="helloworld">
    <button id="sayhello">Say Hello</button>
</div>

Answer 2

如果使用模板动态呈现页面，则在render函数中考虑调用view.setElement（...）;

this.setElement（$（ '＃登录容器'））;

backbone.js click事件未触发

2 个答案: