2
我有一个相当简单的表格，使用Backbone Marionette CompositeView创建。该表的唯一要求是显示数据并允许用户通过单击标题行对其进行排序。在对表进行排序时，用于排序标题列的列标有类，以允许使用CSS显示箭头（例如'class =“sort asc”'）。骨干木偶复合视图“事件僵尸”
这是问题：当单击标题行时，传递给回调（通过event.target）的元素不是DOM上的表的一部分。相反，使用Chrome的调试工具，看起来目标元素实际上是模板脚本块的一部分，而不是用户实际看到的元素。
我现在最好的解决方法是通过从模板中的克隆中检索唯一信息来查找实际附加到DOM的元素。
这里的复合视图代码（从一个借用德里克贝利的样品小提琴的）：
// The grid view
var GridView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
template: "#grid-template",
itemView: GridRow,
events: {
'click th': 'doSort'
},
doSort: function(event) {
var target = $(event.target);
this.collection.sortByField(target.data('sortby'));
target.parent('tr').find('.sort').removeAttr('class');
target.addClass('sort ' + this.collection.sortdir);
debugger; // NOTE: no change to elements in the DOM. WTH?
target = this.$('[data-sortby=' + target.data('sortby') + ']');
target.parent('tr').find('.sort').removeAttr('class');
target.addClass('sort ' + this.collection.sortdir);
debugger; // NOTE: DOM updated.
},
appendHtml: function(collectionView, itemView) {
collectionView.$("tbody").append(itemView.el);
}
});
模板是简单，以及：
<script id="grid-template" type="text/template">
<thead>
<tr>
<th data-sortby="username">Username</th>
<th data-sortby="fullname">Full Name</th>
</tr>
</thead>
<tbody></tbody>
</script>
修饰以Derek的原始演示小提琴的叉证明问题可以在这里找到： http://jsfiddle.net/ccamarat/9stvM/14/
我蜿蜒了一下。我的问题是，我似乎有一个产生了僵尸视图的种类;这是一个jQuery/Backbone/Underscore错误，或者我只是想解决这个问题吗？
**编辑** 这里展示这两个元素的不同层次家长的控制台输出：
console.log(target, targetb):
[<th data-sortby="username" class="sort asc">Username</th>] [<th data-sortby="username">Username</th>]
console.log(target.parents(), targetb.parents()):
[<tr>…</tr>, <thead>…</thead>] [<tr>…</tr>, <thead>…</thead>, <table>…</table>, <div id="grid">…</div>, <body>…</body>, <html>…</html>]
console.log(target === targetb):
false
你能更具体地了解问题吗？你已经以非常详细的方式提到了几个潜在的问题，但是只提出一个非常简短的问题，没有详细说明僵尸视图。你想解决哪个问题？你为什么认为你有僵尸的观点？你看到什么僵尸，在哪里？ –
也 - 我已经在最新版本的Chrome中运行您的示例小提琴，并且它工作正常。你说DOM没有更新的评论......当我运行它时，它已经被更新了。你使用什么浏览器/版本？ –
如果听起来有不止一个问题比我做了一个糟糕的工作来解释我自己。唯一的问题是我称之为僵尸视图。我称之为的原因是，至少在我的设置中，在第一个断点（使用event.target）更新的元素*不是*与第二个元素相同（使用this。$ el.find（ ））。我正在使用最新版本的Chrome进行测试，并且我已经能够在两台不同的计算机上进行两次复制。 –