命名空间的Backbone.js视图不触发事件
Namespaced Backbone.js Views not firing events
我目前正在开始使用Backbone.js。我用Backbone写了一些例子,它们工作得很好。但现在我需要使用Backbone.js与Rails 3.1和CoffeeScript。我把我的工作良好的例子和重写在CoffeeScript上使用backbone-rails gem。
得到以下问题。我已经简化了代码,但问题仍然存在
我有以下文件:
这里我在main.js.coffee文件中启动我的Backbone应用程序,根据我在rails应用程序中的main_controller:
$ = jQuery
$->
CsfTaskManager.init()
下面是主干应用的描述:
#= require_self
#= require_tree ./templates
#= require_tree ./models
#= require_tree ./views
#= require_tree ./routers
window.CsfTaskManager =
Models: {}
Collections: {}
Routers: {}
Views: {}
init: ->
new CsfTaskManager.Routers.AppRouter()
Backbone.history.start()
这是我的应用的路由器:
class CsfTaskManager.Routers.AppRouter extends Backbone.Router
initialize: (options) ->
goalsBlock = new CsfTaskManager.Views.goalsView()
routes:
"!/": "root",
some other routes...
最后一个视图:
class CsfTaskManager.Views.goalsView extends Backbone.View
initialize: ->
this.goals = new CsfTaskManager.Collections.GoalsCollection()
el: $('div#app'),
events:
"click .add-btn": "addGoal"
addGoal: ->
alert('ji')
HTML页面有如下代码:
<div id="app">
<div class="app-screen hidden" id="goal-form" style="display: block; ">
<button class="btn" id="load">
Load
</button>
<h3>
New Goal
</h3>
<div class="form-stacked">
<form accept-charset="UTF-8" action="/goals" class="new_goal" id="new_goal" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div>
<label for="goal_title">Title</label>
<p></p>
<input class="goal-title" id="goal_title" name="goal[title]" size="30" type="text">
<p></p>
<label for="goal_note">Note</label>
<p></p>
<input class="goal-note" id="goal_note" name="goal[note]" size="30" type="text">
</form>
</div>
<p>
<button class="add-btn btn">
Add
</button>
</p>
<ul id="goals-list"></ul>
</div>
<table class="app-screen bordered-table" id="calendar-grid" style="display: none; ">
<tbody><tr>
<td colspan="2">
week
</td>
</tr>
<tr>
<td>
day
</td>
<td>
<div id="calendar"></div>
</td>
</tr>
</tbody></table>
<div class="app-screen hidden" id="role-form" style="display: none; ">
<h3>
New User Role
</h3>
<div class="form-stacked">
<form accept-charset="UTF-8" action="/roles" class="new_role" id="new_role" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div>
<label for="role_title">Title</label>
<p></p>
<input class="role-title" id="role_name" name="role[name]" size="30" type="text">
<p></p>
<label for="role_note">Note</label>
<p></p>
<input class="role-note" id="role_description" name="role[description]" size="30" type="text">
</form>
</div>
<p>
<button class="add-btn btn">
Add
</button>
</p>
</div>
</div>
所以。add-btn元素嵌套在#app中,但是点击这个按钮不会触发事件。哪里会有麻烦?
以前,当我在一个.js文件中拥有相同的应用程序时,没有coffeescript,没有命名空间和backbone-rails gem,一切都很好。
不管怎样,approouter工作得很好,goalsView对象也成功创建了,但是由于某些原因事件没有触发。
我认为问题可能是CsfTaskManager
中的以下行:
el: $('div#app'),
通常应该是一个jQuery选择器字符串或一个DOM元素。这里传递的是一个jQuery对象。试试改成:
el: 'div#app'
(CoffeeScript中也不需要逗号)
相关文章:
- 取消绑定主干视图事件
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 如何测试主干视图是否正确侦听特定事件
- Ember视图未响应用户启动的事件
- 主干视图触发全局事件
- WinJs中的视图状态更改事件在哪里
- IBM BPM如何在Coach视图中处理按键事件
- 更改el属性时未激发主干视图事件
- 缓存主干视图及其事件
- 为什么每次重新渲染父视图时都需要重新委派子视图的事件
- 如何在angularjs中检查Kendo树视图数据绑定事件
- 骨干视图触发事件两次
- 当我认为它不应该重新渲染视图时,如何防止 Meteor 在 html 选择 dom 单击事件上重新渲染视图
- 将多个事件动态添加到多个 Web 视图
- 触发的事件被接收两次.如何找到鬼视图
- MVC-部分视图中元素上的Javascript事件
- 视图焦点的AngularJS事件
- 是否有任何事件“;在$scope摘要完成时”;或“;在视图刷新时”;在Angular.js中
- 如何在渲染新视图之前关闭所有事件
- Angular.js-Socket.io事件更新模型,而不是视图