Jsviews树形控件展开后引发第二次点击事件

Question

我正在尝试修改 tree control example 以便它在 li 中嵌套 ul，这是我的模板：

template:
            '<li>' +
                '{{if folders && folders.length}}' +
                    '<span class="toggle">{^{:expanded ? "-" : "+"}}</span>' +
                '{{else}}' +
                    '<span class="spacer">&bull;</span>' +
                '{{/if}}' +
                '{{>name}}' +
                '{^{if expanded}}' +
                    '<ul>' +
                    '{{for folders}}' +
                        '{^{tree/}}' +
                    '{{/for}}' +
                    '</ul>' +
                '{{/if}}' +
            '</li>',

我的标签是：

{^{tree _data/}}

这会生成所需的 html - 但还会引发第二次点击事件，随后会折叠刚刚展开的列表项？

感谢任何帮助，谢谢。

Answer 1

这是因为您将两个 <li> 合二为一，点击事件的事件冒泡现在会触发更高层的树节点上的其他切换事件。（之前，self.contents("li").first() 选择器确保不捕获来自更深层的气泡点击事件。但现在更深的节点与父节点位于同一 li 下。）

因此，一种解决方法是防止冒泡。 Return 来自处理程序的 false（或调用 event.stopPropagation()）。

self.contents("li")
  .on("click", ".toggle", function() {
    self.toggle();
    return false;
  });

另一种是将点击事件与span相关联，而不是li，所以它没有找到多个.toggle目标：

var self = this;
self.contents("li").find(".toggle")
  .on("click", function() {
    self.toggle();
  });

另一种方法是为点击处理程序使用 {{on}} 标签绑定。事实上整个实现更简单：

$.views.tags({
  tree: {
    template: '<li>' +
      '{{if folders && folders.length}}' +
        '<span data-link="{on ~tag.toggle} {:expanded ? \'-\' : \'+\'}" class="toggle"></span>' +
      '{{else}}' +
        '<span class="spacer">&bull;</span>' +
      '{{/if}}' +
      '{{>name}}' +
      '{^{if expanded}}' +
        '<ul>' +
          '{{for folders}}' +
            '{{tree/}}' +
          '{{/for}}' +
        '</ul>' +
      '{{/if}}' +
    '</li>',

    //METHODS
    toggle: function() {
      var data = this.tagCtx.view.data;
      $.observable(data).setProperty("expanded", !data.expanded);
    }
  }
});

我可能会切换示例以采用这种方法...

Jsviews树形控件展开后引发第二次点击事件

Jsviews tree control raises second click event after expanding

jsviews