Дерево управления Jsviews вызывает событие второго щелчка после расширения - PullRequest
Новая
       16

Дерево управления Jsviews вызывает событие второго щелчка после расширения

0 голосов
/ 19 февраля 2019

Я пытаюсь изменить пример дерева управления , чтобы он вложил 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 - но также вызывает событие второго щелчка, которое впоследствии сворачивает только что развернутые элементы списка?

Любая помощь приветствуется, спасибо.

1 Ответ

0 голосов
/ 20 февраля 2019

Это потому, что вы объединили два <li> s в один, и всплывающее событие события click теперь вызывает другие события переключения на верхних узлах дерева.(Раньше селектор self.contents("li").first() гарантировал, что событие щелчка пузырька из глубины не было перехвачено. Но теперь более глубокие узлы находятся под тем же li, что и родительские узлы.)

Таким образом, одно исправление состоит в том, чтобы предотвратить пузырение,Вернуть false из обработчика (или вызвать event.stopPropagation()). 

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

Другой способ - связать событие click с 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);
    }
  }
});

Я, вероятно, переключу выборку на такой подход ...

...