Нокаут, JQMobile и генерация сбрасываемого набора не совсем корректны

Question

Я проверил несколько образцов, но ни один из них не то же самое, что я пытаюсь сделать.

У меня есть работы, в основном, но это не совсем правильно.

Вот сценарий, иллюстрирующий проблему.

http://jsfiddle.net/5yA6G/4/

Обратите внимание, что верхний набор работает отлично, но это статически определено.

Нижний набор (Tom, steve, bob) «работает» в основном, но элемент заголовка заканчивается как в складном заголовке AND, так и в части сбрасываемого, который скрывается.

Похоже, что я должен что-то делать неправильно, но я не смог понять, что.

Любые идеи?

Answer 1

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

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

   <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. Оберните это в div с классом = "collapsi BLE как так

   <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 мобильного после того, как вы сделаете ваше связывание так:

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

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

Answer 2

Для справки и для кого-либо еще, сталкивающегося с этой проблемой, она оказывается, по крайней мере, несколько очевидной в ретроспективе.

Нокаут встроенный «анонимный» шаблоны отлично работает во многих случаях, но с 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 от «визуализации» элементов шаблона, когда загружаются страницы, поэтому они будут отображаться правильно, когда они будут созданы.

EDIT: вышеизложенное отлично подходит для складок НЕ в складном наборе, но если они находятся в комплекте, я нашел стиль элементов (в частности, округление угла, чтобы указать принадлежность к набору) не работает правильно.

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

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

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

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

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

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

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