Question

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

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之下。）

所以一种解决方法是防止起泡。从处理程序返回false（或调用event.stopPropagation()）。

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

另一种方法是将click事件与范围而不是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树控件扩展后引发第二次单击事件

1 个答案: