骨干木偶组合视图”事件僵尸”
我有一个相当简单的表，它是使用主干木偶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/骨干/下划线错误，还是我只是把这一切都搞错了？
**编辑**这是控制台输出，显示两个元素的不同父层次结构：
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
共有1个答案
我看不到任何僵尸观点的证据。
我创建了一个代码分支，并加入了一些额外的日志来检查视图实例，但我并没有看到任何僵尸。每次都使用相同的GridView实例。每次排序时，子视图都被正确关闭。
http://jsfiddle.net/derickbailey/hadbf/4/
您看到的问题可能是由使用target=$（e.target）和targetb=this引起的$(...)
。这是两个非常不同的语句，它们来自两个非常不同的DOM元素源。
target=$（e.target）的第一次使用直接从DOM运行。您正在单击的目标上运行选择器，它只是将DOM元素包装到jQuery选择器对象中。
第二次使用targetB=this$(...)正在使用主干视图的$el执行查找：此操作$埃尔。查找（“…”）
将根据视图的EL返回结果。视图的$eL恰好包含DOM的一部分元素。但是$el与e事件不是同一个对象，因此您永远不会得到target===targetb为真的结果。
... 除非我完全误解了这个问题（在这一点上似乎很有可能），否则我认为这里没有问题。
-
我有一个收藏模型的典型结构。 在视图中，每个对象都有一个“编辑”按钮，该按钮应该取消激活其他对象的所有“编辑”按钮。 我想知道这样做的最佳做法是什么。谢谢！！
-
我不能和木偶师一起放录影带。我该怎么办？ 我的代码： （异步函数main（）{try{const browser=await puppeteer.launch（{args:['--no-sandbox','--disable-setuid-sandbox']}）const page=await browser.newpage（）；await page.goto（'https://www.youtu
-
问题内容： 有人知道如何获取元素的或文本吗？甚至更好；如何单击具有特定元素的元素？这就是普通JavaScript的工作方式： 在此先感谢您的帮助！ 问题答案： 这就是我获取innerHTML的方式：
-
运行新页时，必须使用函数指定视口的大小：
-
问题内容： 在过去的几周里，我一直在与Facebook框架React.js和Backbone一起工作，但是我仍然不确定是否有什么最合适的方法来重新渲染React组件。已作为道具传递。 目前我要做的是在集合上设置侦听器，并在触发时设置状态： 我已经看到了将模型克隆到状态的示例： 我也看到了变体，其中props中的模型/集合直接在渲染中使用，而不是使用状态，然后在集合/模型发生更改时调用forceUp
-
英文原文：http://emberjs.com/guides/views/handling-a-view/ 你只需简单地将想要响应事件的名字作为你的视图的方法名实现即可，而不必为响应的每个元素上注册事件监听器。 例如，假设我们有这样一个模板： 1 2 3 {{#view App.ClickableView}} This is a clickable area! {{/view}} 我们这样实现
-
我试图创建我的第一个主干应用程序，并有一些困难让我的头脑如何使用视图。 我试图做的是有一个搜索输入，每次提交它从服务器获取一个集合。我想有一个视图控制搜索输入区域，并收听那里发生的事件（在我的例子中是一个按钮点击），另一个视图带有显示搜索结果的子视图。 单个结果将有其他方法（如查找他们输入的日期或时间等）。 我的模型和集合定义如下： 在我的视图中，有一个视图表示搜索输入： 我的html大致如下所示
-
我正在使用Jetpack Compose开发Android应用程序。该应用程序显示项目列表。它还有一个包含搜索栏的顶部栏。 我们有3个组件:项目列表、搜索栏组件和应用程序栏(应用程序栏包含搜索栏)。 相同的 ViewModel 类注入到可组合列表和可组合搜索栏（使用 Hilt）中。视图模型具有以下项列表：