Как мне обработать стили после того, как вычисленный методом нокаута обновил мое представление?

Question

В моем приложении KnockoutJS есть проблема, которую я не могу решить.По сути, я связал список с методом «ko.computed», который позволяет мне фильтровать элементы из основного списка.Я использую этот список для моего основного отображения пользователю.На каждый элемент в моем шаблоне у меня есть еще одна или несколько кнопок, которые мне нужно отобразить как кнопки JqueryUI.Кажется, я не могу найти способ правильно перерисовать кнопки в моей модели, когда вычисленные изменения вызывают изменения.

Вот очень (очень) простой пример модели фиктивного вида:

function List(items) { 
  var self = this;
  self.allItems = ko.observableArray(items || []);
  self.search = ko.observable('');
  self.filtered = ko.computed(function(){
    var search = self.search();
    return ko.utils.arrayFilter(self.allItems(), function(item){
      return item == search;
    });
  });
}

Мой взгляд может выглядеть так:

Search: <input type='text' data-bind='value: search' />
<ul data-bind='foreach: filtered'>
  <li>
    <span data-bind='text: $data'> </span>
    <button>NOTICE</button>
  </li>
</ul>

А вот какЯ инициализирую дисплей:

$(function(){
  var vm = new List(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
  ko.applyBindings(vm);
  $('button').button(); // <-- notice!
});

Обратите внимание, что изначально все отлично работает!Я получаю симпатичную кнопку JqueryUI при первом отображении страницы ... Однако, как только я ввожу a в поле поиска, кнопка полностью теряет свой стиль.Мне нужно найти способ снова вызвать $('button').button().

Есть ли внутри Knockout.js событие или обратный вызов, который я мог бы вызвать для настройки кнопок пользовательского интерфейса после запуска вычисляемого метода?

Заранее спасибо!

Answer 1

Причина, по которой стиль сбрасывается, заключается в том, что элемент dom, к которому ранее была привязана кнопка, был уничтожен.

Вы можете решить эту проблему, создав простую настраиваемую привязку (не проверено)

ko.bindingHandlers.uibutton = {
    init: function(element, valueAccessor) {
        var $element = $(element), config = valueAccessor();
        $element.button();
    }
}

Это может быть добавлено в ваш шаблон с этим дополнением

<button data-bind="uibutton: {}">NOTICE</button>

Вы можете удалить вызов $ ('button'). Button ();

При использованииНо мы можем почти обойтись без стандартных выражений Jquery, часто пользовательские привязки позволяют нам делать то же самое, но с возможностью более сложных вещей, таких как реакция на наблюдаемые и т. Д.

Надеюсь, это поможет