Привязка к нокауту для дерева джаго с флажком - PullRequest
Новая
       15

Привязка к нокауту для дерева джаго с флажком

0 голосов
/ 11 июня 2019

Мне нравится вид дерева gijgo с чекбоксом как чистый и аккуратный, и он решает задачу отображения информации об иерархии.Обратитесь к ссылке ниже для документации.

https://gijgo.com/tree/demos/bootstrap-treeview-checkbox

Поскольку knockout.js является предпочтительным для разработки внешнего интерфейса, следовательно, необходимо разработать привязку для выбивания для этого конкретного требования.

Идея состоит в том, чтобы заполнить данные иерархии из серверной части и связать их с пользовательской привязкой выбивки.

Пользователь выбирает / снимает выбор некоторых флажков, а затем нажимает кнопку сохранения.выбранные / невыбранные данные снова отправляются на сервер для сохранения.

В приведенном ниже коде используется элемент управления в jquery.

Функция tree.getCheckedNodes() возвращает массив выбранныхфлажки.

Как можно вызвать указанную выше функцию из привязки с выбиванием. 

ko.bindingHandlers.tree = {
  init: function (element, valueAccessor, allBindingsAccessor) {

  },

  update: function (element, valueAccessor, allBindingsAccessor) {
    var options = valueAccessor() || {};
    var value = ko.utils.unwrapObservable(valueAccessor());
    var tree = $(element).tree(value);

  }
}

1 Ответ

1 голос
/ 11 июня 2019

В методе init:

  • Развернуть исходные данные виджета, переданные вашей моделью представления из valueAccessor
  • Преобразование исходных данных в формат, который понимает виджет дерева
  • Инициализировать виджет с правильными настройками $(element).tree({ /* ... */ })
  • Подключите прослушиватель событий (.on("change", function() { }) для отслеживания ввода пользователя
    • В функции прослушивателя событий запишите данные из пользовательского интерфейса в модель представления (например, valueAccessor() (tree.getCheckedNodes()))
  • Необязательно: добавьте настраиваемую логику удаления для очистки виджета, если нокаут удаляет его из DOM

В методе update, который вызывается при изменении значения модели представления

  • Реализация логики, которая обновляет виджет на основе ваших новых настроек. Вероятно, что-то вроде tree.check(ko.unwrap(valueAccessor())). Убедитесь, что обновление «тихое», если оно вызовет событие change, вы попадете в бесконечный цикл.
...