Javascript RactiveJS应该以触发代理事件的元素为目标，而不是它'；孩子们

Stackoverflow.com的好人。我正在尝试向单击的

li

中添加一个

active

类名。显示它已被选中

我的模板：

 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>";

我如何处理事件：

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

我发现：

event.target

是单击的

a

中的元素（例如

div.imgwrapper

，

figcaption

）

非分离性行为类似：

---

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

我刚刚想到使用jQuery使用

$.closest（）

像这样遍历dom

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

---

这实际上是可行的。

您可能只需遍历DOM并找到

li

元素，但在某些情况下可能会导致问题。如果调用

ractive.set（'legs'，new_data）

，ractive将重用现有节点，因此类将保留在那里。此问题有几种解决方案（第三种可能是最好的）：

使用

ractive.merge（）

而不是

ractive.set（）

使用

splice（）

和

push（）

代替

ractive.set（）

更改模板并让Ractive管理该类：

---

你能解释一下

的作用吗？我不熟悉那种用法。这就是

set（例如keypath+'.active'）

所指的吗？因为它是一个可选择项的列表，所以当单击一个新项时，我希望当前活动的

li

在将活动类添加到当前类之前删除它的活动类，并触发一个函数来执行与新激活项相关的操作。@cmn请改用它：

，然后根据事件的indexRef设置一个活动属性：

set（'active'，e.indexRef.i）

对不起，那应该是

index

，而不是

indexRef

：

set（'active'，e.index.i）

@martypdx非常有趣<代码>#i===active太棒了。那叫什么/我在哪里可以找到关于什么是允许的所有信息？属性值采用mustache refs（包括部分！），就像模板中的任何其他地方一样（它可以只是属性的一部分：

class=“myclass{{{{条件}}其他类{{/}”

）。您可以将当前索引与活动索引进行比较，即

{{{{#（i==active）}

。更多关于胡子“块”的信息。我给出的示例是一个隐式条件块，Ractive也允许显式的，这将是：

{{{#if I===active}}}active{{/if}}

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

<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);
});