RactiveJS 应该针对触发代理事件的元素，而不是子元素答案

【问题标题】：RactiveJS Should Target The Element Triggering Proxy Event, Not It's ChildrenRactiveJS 应该针对触发代理事件的元素，而不是子元素
【发布时间】：2014-08-06 15:40:39
【问题描述】：

我正在尝试将active 类名添加到单击的li。显示它已被选中。

我的模板：

 var legCatagoryTemplate = "<ul>{{#legs:i}}<li><a href='#' on-click='selectCategory:{{this}},{{i}}' data-id='{{i}}'><figure><div class='imgWrapper'><img src='{{preview}}'></div><figcaption><h4>{{name}}</h4><p>W: {{width}}&quot;  H:<span></span>: {{material}}</p></figcaption></figure></a></li>{{/legs}}</ul>";

如何称呼：

var legCategoryView = new Ractive({
        el: "#catalog",
        template: legCatagoryTemplate,
        data: response_from_ajax
    });

我是如何处理这个事件的：

legCategoryView.on('selectCategory', function ( event, self, index ){
    console.log(event.target, self, index);
}

我发现了什么：

event.target 是被点击的a 内的元素（例如div.imgwrapper、figcaption）

Non Ractive 的行为类似：click event on a div should not be triggered by it's children

使用点击代理对象定位元素的好方法是什么？

【问题讨论】：

标签： javascript dom-events ractivejs

【解决方案1】：

您可能只是遍历 DOM 并找到 li 元素，但这在某些情况下可能会导致问题。如果您调用ractive.set('legs', new_data)，Ractive 将重用现有节点，因此您的类将保留在那里。这个问题有几种解决方案（第三种可能是最好的）：

使用ractive.merge() 而不是ractive.set()。
使用splice() 和push() 而不是ractive.set()。
更改您的模板并让 Ractive 管理课程：

<ul>
{{#legs:i}}
    <li class="{{#.active }}active{{/}}">
        <a href='#' on-click='selectCategory:{{this}},{{i}}' data-id='{{i}}'>
            <figure>
                <div class='imgWrapper'><img src='{{preview}}'></div>
                <figcaption>
                    <h4>{{name}}</h4>

                    <p>W: {{width}}&quot; H:<span></span>: {{material}}</p>
                </figcaption>
            </figure>
        </a>
     </li>
{{/legs}}
</ul>

ractive.on('selectCategory', function ( e ) {
    ractive.set(e.keypath + '.active', true);
});

【讨论】：

您能解释一下<li class="{{#.active}}active{{/}}"> 的作用吗？我不熟悉这种用法。这就是set(e.keypath + '.active') 所指的吗？由于它是一个可选项目列表，当单击一个新项目时，我希望当前活动的li 在将活动类添加到当前类之前删除它的活动类，并触发一个函数来执行与新激活的相关的事情项目。
@Cmndo 改用这个：<li class="{{#i===active}}active{{/}}">，然后只需根据事件的 indexRef 设置一个活动属性：set('active', e.indexRef.i)
抱歉，应该只是index，而不是indexRef：set('active', e.index.i)
@martypdx 非常有趣。 #i====active 太棒了。这叫什么/我在哪里可以找到关于允许的所有信息？
属性值采用 mustache refs（包括部分！），就像模板中的其他任何地方一样（它可以只是属性的一部分：class="myclass {{#condition}}otherclass{{/}}"）。 Ractive adds expressions to mustache，所以你可以做一些事情，比如比较当前索引和活动索引，也就是{{# (i===active) }}。 See here 了解更多关于小胡子“块”的信息。我给出的示例是一个隐式条件块，Ractive 也允许显式，即：{{#if i===active}}active{{/if}}

【解决方案2】：

我刚刚有了这样的想法，使用 jQuery 遍历带有 $.closest() 的 dom

legCategoryView.on('selectCategory', function ( event, self, index ){
    $(event.original.target).closest('li').addClass("active");
}

这确实有效。

【讨论】：