Question

Stackoverflow.com的优秀人才。我正在尝试向点击的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）

非反应行为类似：click event on a div should not be triggered by it's children

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

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

Answer 2

我刚才有了使用jQuery以$.closest()遍历dom的想法

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

实际上有效。

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

2 个答案: