浏览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();
解决方法
这是因为#sayhello不是你观点的一部分.尝试将#sayhello放在#helloworld中:
<div id="helloworld"> <button id="sayhello">Say Hello</button> </div>