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

Question

我正在尝试将一个 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

使用单击代理对象定位元素的好的解决方案是什么？

Answer 1

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

1. 使用 ractive.merge() 代替 ractive.set()。
2. 使用 splice() 和 push() 代替 ractive.set()。
3. 更改模板并让 Ractive 管理类(class):

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