我对群组和子视图的效果几乎与此example对 App.views.people 和 App.views.person 一样。我在孩子的li元素中放了一个按钮，点击时它不会触发。
我看到的是调试......
当我创建子视图时新的RoleRoleView（{，事件哈希“click.first”绑定到视图OK，看起来事件已定义确实在视图上。当实际点击发生时，我不知道他们在Jqry搜索时最终会在哪里结束。但是当我调试按钮上的点击并查看JQuery代码以便将事件发送给注册的handers时，在“li”标签中出现的点击中，Jquery处理程序的队列中没有任何内容......
换句话说，当我点击“Del”class =“first”按钮时，下面的jQuery代码在handlerQueues中没有任何内容。
- EDIT--
fiddle使用静态集合而不是parse.com后端工作正常。
但是当我把解析云连接起来时，小提琴第29行的事件就不会发生......
'click .rmgroup': 'rmagrp'
JS.20用于event.Hash中jquery没有触发（“click .rmgroup”......
JQ 2.03 Dispatch（DEBUG - 我认为对于点击Del而来说handlerQueue是空的，它不应该是）
// Determine handlers
handlerQueue = jQuery.event.handlers.call(this, event, handlers);
// Run delegates first; they may want to stop propagation beneath us
i = 0;
while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) {
event.currentTarget = matched.elem;
j = 0;
while ((handleObj = matched.handlers[j++]) && !event.isImmediatePropagationStopped()) {
// Triggered event must either 1) have no namespace, or
// 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
if (!event.namespace_re || event.namespace_re.test(handleObj.namespace)) {
event.handleObj = handleObj;
event.data = handleObj.data;
ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler)
.apply(matched.elem, args);
if (ret !== undefined) {
if ((event.result = ret) === false) {
event.preventDefault();
event.stopPropagation();
}
}
}
}
}
我的代码在下面
var PostView = Parse.View.extend({
tagName: "li",
template: _.template($('#item-template').html()),
events: {
"click .relation" : "userrelation",
"click .post-content" : "userrelation",
"click .innrrole" : "rolerelation"
},
initialize: function() {
_.bindAll(this, 'render');
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
rolerelation: function() {
if(this.model.get("ACL").getWriteAccess(Parse.User.current())){
var relation = this.model.relation("roles");
...
$("#post-list").empty();
var roleView = new ManageRolesView({collection: mroles, role:role, rolename:rolename, model:Post});
});
} else alert("Update by group owner only ");
}
}）;
var ManageRolesView = Parse.View.extend({
// Delegated events for creating new items, and clearing completed ones.
events: {
"keypress #new-Role": "createOnEnter"
},
el: ".content",
initialize: function(options) {
//TODO fix callback
var self = this;
var parentName = this.options.rolename;
_.bindAll(this, 'addOne', 'addAll', 'createOnEnter');
this.$el.html(_.template($("#manage-roles-template").html()));
this.$("#prole-info").html(this.options.rolename);
this.input = this.$("#new-Role");
state.on("change", this.addAll(this.collection , this ));
this.collection.bind('reset', this.addAll);
this.collection.bind('add', this.addOne);
},
addOne: function(Role) {
var view = new RoleRoleView({model: Role});
this.$("#role-list").append(view.render().el);
},
addAll: function(collection, filter) {
this.$("#role-list").html("");
this.collection.each(this.addOne);
},
createOnEnter: function(e) {
...
this.input.val('');
}
});
//ROLE ROLE VIEW
var RoleRoleView = Parse.View.extend({
tagName: "li",
template: _.template($('#role-template').html()),
events: {
"click .first" : "rmagrp" ** this event does not fire **
},
initialize: function() {
_.bindAll(this, 'render', 'rmagrp');
},
rmagrp: function() {
console.log("CLK on A tag");
alert("bugout");
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
海报 - ＆GT; ＆LT; /脚本＆GT; - ＆GT;
<div id="postapp">
<div class="title">
<h2><img src='images/ebook.jpg' style="vertical-align:middle" width="40" height="40" />
<label style="padding:5px 5px 5px 25px;">Tell Me Stories - Groups</label>
</h2>
</div>
<div class="content">
</div>
</div>
<!-- Templates -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<h2>Log In</h2>
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</div>
</script>
<script type="text/template" id="manage-posts-template">
<div id="user-info">
Signed in as <%= Parse.User.current().get("username") %> <a href="#" class="log-out">Log out</a>
</div>
<div class="section">
<header id="header">
<input id="new-Post" placeholder=" <%= input_label %> " type="text" />
</header>
<div id="main">
<ul id="post-list">
<img src='images/spinner.gif' class='spinner' />
</ul>
</div>
</div>
</script>
<script type="text/template" id="manage-roles-template">
<p id=prole-info/>
<div class="section">
<header id="header">
<input id="new-Role" placeholder="Type-Role-Name-here:" type="text" />
</header>
<div id="role-main">
<ul id="role-list">
<img src='images/spinner.gif' class='spinner' />
</ul>
</div>
<div class="error" style="display:none"></div>
</div>
<footer id="footer">
<a href="" >Home</a>
</footer>
</script>
<script type="text/template" id="manage-users-template">
<div class="section">
<header >
<p id=prole-info/>
</header>
</div>
<div class="section">
<header id="header">
<input id="new-User" placeholder="Type-Group-Members-here:" type="text" />
</header>
<div id="user-main">
<ul id="user-list">
<img src='images/spinner.gif' class='spinner' />
</ul>
</div>
<div class="error" style="display:none"></div>
</div>
<footer id="footer">
<a href="" >Home</a>
</footer>
</script>
<script type="text/template" id="item-template">
<div class="view">
<a href="#" class="relation">
<img src="images/user.png" style="vertical-align:middle" width="40" height="40">
</a>
<label class="post-content"><%= name %></label>
<a href="#" class="innrrole">
<img src="images/group-sm.png" style="vertical-align:middle" width="40" height="40">
</a>
<button class="todo-destroy"></button>
</div>
</li>
</script>
<script type="text/template" id="user-template">
<div class="user">
<label class="user-content"><%= name %></label>
</div>
</li>
</script>
<script type="text/template" id="role-template" >
<div class="role">
<label class="role-content"><%= name %></label>
<button class="first" >
Del
</button>
</div>
</li>
</script>