1

我正在尝试向单击的类添加一个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 的行为类似：div 上的单击事件不应由其子级触发

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

4

2 回答 2

2

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

  1. 使用ractive.merge()而不是ractive.set().
  2. 使用splice()andpush()而不是ractive.set().
  3. 更改您的模板并让 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);
});
于 2014-08-06T16:13:32.700 回答
0

我只是想到了使用 jQuery $.closest()像这样遍历 dom

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

这确实有效。

于 2014-08-06T15:49:17.000 回答