KnockoutJS: выполнить шаблон во вновь добавленном элементе DOM

0

У меня есть большой объект данных, который генерирует таблицу с большим количеством выпадающих меню. Это происходит навсегда, поэтому я пытаюсь ускорить рендеринг таблицы, не отбрасывая все выпадающие меню при начальной загрузке. Вместо этого я просто хочу отображать каждое меню по требованию/клику.

// HTML Element
<button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="click: getTags">Tag</button>
<ul class="dropdown-menu">
    // Some HTML here
</ul>

// KO Template
<script type="text/html" id="alltags">
    <a href="#" data-bind="text: $data"></a>
</script>

// JS Code
self.getTags = function(data, event) {
    self.availableTags(data.component.available_tags())
    $(event.target).parent().find('ul').prepend('<li data-bind="template: { name: alltags, data: availableTags }"></li>')
}

Проблема, с которой я сталкиваюсь, что элемент DOM добавляется в div, как я этого хочу, но для жизни я не могу заставить его выполнить цикл foreach: и генерировать содержимое меню.

Нужно ли обновлять привязки?

Теги:
knockout.js

1 ответ

2
Лучший ответ

Привязки привязки не будут срабатывать при добавлении html таким образом, что бы я сделал.

Создайте выпадающие списки при загрузке и привяжите параметры к пустующему массиву, когда происходит событие щелчка, заполнив пустой массив желаемыми данными.

addtl.....

вы можете создать шаблон, который создает ваши выпадающие списки и загружает их, а затем делать что-то вроде этого

<!--   ko foreach: templates -->

  <div data-bind:template:{name: tmpl, data:data}></div>
<!--     /ko  -->

затем используйте setTimeout, чтобы загружать только несколько за раз, это все равно займет некоторое время, но уменьшит ваш интерфейс.

function recursive(){
setTimeout(function(){
  // load 5 templates into template array
  check if there are more left, call recursive function to add more
 },50);
}

немного усложнился, но я сделал аналогичные вещи, чтобы исправить отставание пользовательского интерфейса в прошлом

Поделиться
  • 0
    Боже мой ... это было так просто! Должно быть, я потратил 8 часов, чтобы понять это!
  • 0
    Должен добавить, что это не решает мою проблему с медлительностью. Если я рендерил все выпадающие списки при начальной загрузке страницы, то на рендеринг таблицы уходит около 5 секунд. Если я использую этот подход с заполнением observableArray по щелчку и последующим рендерингом меню, рендеринг каждого меню занимает от 2 до 5 секунд ...
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню