Knockout, JQMobile и создание складного набора не совсем работают правильно

На самом деле я нашел гораздо более простой способ сделать это:

1. Настройте привязку foreach, как обычно, для меня это выглядело так

   <div data-bind="foreach: promotions">
   
       <h3 data-bind="text: Title"></h3>
           <p>Creator:<span data-bind="text: Creator"></span></p> 
           <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
           <span data-bind="text: Description"></span>
           <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>
   

2. Wrap that in a div with class="collapsible like so

   <div data-role="collapsible-set" data-bind="foreach: promotions">
   
   <div class="collapsible">
       <h3 data-bind="text: Title"></h3>
           <p>Creator:<span data-bind="text: Creator"></span></p> 
           <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
           <span data-bind="text: Description"></span>
           <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>
   

3. Примените складной виджет через jquery mobile после того, как вы выполните привязку следующим образом:

   $(document).ready(function () {
       ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions);
       ko.applyBindings(PromotionViewModel);
       $('.collapsible').collapsible();
   });
   

4. Для складного набора можно применить ту же идею, просто установите class="collapsible-set" в вашем блоке foreach. Надеюсь это поможет

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

Встроенный в Knockout «анонимный» шаблон отлично работает во многих случаях, но с JQMobile он может быть немного причудливым.

Это связано с тем, что JQMobile будет корректировать содержимое анонимного шаблона при загрузке страницы, как и все остальное содержимое.

Затем, позже, когда вы используете функцию ApplyBindings нокаута, нокаут добавит применимые элементы, как и должно быть. Как намекают многие сообщения и ответы, вы ДОЛЖНЫ вызывать collapsible() для вновь созданных элементов с помощью чего-то вроде этого.

$("div[data-role='collapsible']").collapsible({refresh: true});

Нет проблем. ОДНАКО, если JQM уже применил форматирование, то анонимный шаблон уже был "отрендерен" JQM, поэтому рендеринг его снова путем вызова складного вызывает всевозможные странные результаты, включая двойной заголовок, вложенные складные элементы и т. д.

Решение для меня состояло в том, чтобы использовать функцию «Именованный шаблон» Knockout и просто поместить шаблон для рендеринга складных элементов в тег, например:

<script type="text/html" id="alarm-template">
    <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="false">
        <h3 data-bind="text:name"></h3>
        <p>The content here</p>
        <p data-bind="text: name"></p>
    </div>
</script>               

Это предотвращает «рендеринг» элементов шаблона JQM при загрузке страницы, поэтому они будут отображаться правильно, когда они фактически сгенерированы.

РЕДАКТИРОВАТЬ: вышеизложенное отлично работает для складных элементов НЕ в складном наборе, но, если они находятся в наборе, я обнаружил, что стиль элементов (в частности, округление углов для указания принадлежности к набору) не работать правильно.

Из того, что я могу сказать, есть 2 проблемы:

Во-первых, просто нажатие кнопки «Создать» фактически не обновляет стиль всех складных элементов в наборе. для этого нужно сделать...

$("div[data-role='collapsible-set']").collapsibleset('refresh');

Но есть проблема похуже. JQM «помечает» последний элемент в наборе как «последний элемент». Затем этот факт используется для определения стиля последнего элемента при его развертывании/сворачивании.

Поскольку Knockout на самом деле не перестраивает весь набор (для скорости), каждый раз, когда вы вызываете метод обновления, JQM покорно помечает последний элемент как «последний», но никогда не удаляет метки на предыдущих элементах. В результате, если вы начинаете с пустого списка, КАЖДЫЙ элемент в конечном итоге помечается как «последний», и из-за этого стиль не работает.

Я подробно описал это исправление на github в отчете о проблеме.

https://github.com/jquery/jquery-mobile/issues/4645