Knockout, JQMobile i generowanie składanego zestawu nie wydają się działać poprawnie

Question

Sprawdziłem wiele próbek, ale żadne nie są takie same jak te, które próbuję wykonać.

Co mam, głównie, ale działa niezupełnie.

Oto skrzypce ilustrujące problem.

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

Zauważ, że górny zestaw działa dobrze, ale to statycznie zdefiniowane.

Zestaw dolny (Tom, steve, bob) "zasadniczo" działa, ale element nagłówka kończy się zarówno w nagłówku AND w części składanej, która zostaje ukryta.

Wygląda na to, że muszę zrobić coś złego, ale nie byłem w stanie dowiedzieć się, co.

Wszelkie pomysły?

Answer 1

I rzeczywiście znalazłem wiele łatwiejszy sposób, aby to zrobić:

1. skonfigurować swoje foreach wiązania jak zwykle dla mnie wyglądało to

   <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. Owiń to w div klasą = "collapsi ble jak tak

   <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. Zastosuj składany widget poprzez jquery komórkowego po zrobić swoje wiązania tak:

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

4. Do składanego zestawu taki sam pomysł może zastosuj po prostu ustaw class = "collapsible-set" na twoim foreach div. Miej nadzieję, że to pomaga

Answer 2

Tylko dla odniesienia i dla każdego, kto boryka się z tym problemem, z perspektywy czasu okazuje się to co najmniej dość oczywiste.

Knockout w "anonimowym" szablonie działa świetnie w wielu przypadkach, ale z JQMobile może być odrobinę dziwaczny.

To dlatego, że JQMobile dostosuje zawartość anonimowego szablonu podczas ładowania strony, tak jak ma to miejsce w przypadku wszystkich innych treści.

Później, gdy użyjesz funkcji ApplyBindings nokaut, nokaut doda odpowiednie elementy, tak jak powinien. Jak wiele napotkano na posty i odpowiedzi, MUSISZ wywołać collapsible() na nowo utworzonych elementach, przez coś takiego.

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

Nie ma problemu. Jednakże, jeśli JQM już zastosowane formatowanie, to anonimowy szablon został już „renderowane” przez JQM, tak czyniąc go ponownie wywołując składany powodując różnego rodzaju funkowych wyników, w tym dwukrotnie pozycją, zagnieżdżonych collapsibles itp

rozwiązanie dla mnie było wykorzystanie „o nazwie szablonu” funkcję nokaut, a wystarczy umieścić szablon do renderowania składane elementy w znaczniku, tak:

<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>    

rozwiązanie to zapobiega JQM z „rendering” elementów szablonu, gdy strony ładują się, więc będą renderowane poprawnie, gdy zostaną wygenerowane.

EDYCJA: Powyższe działa dobrze dla collapsibles NIE w składanym zestawie, ale jeśli są w zestawie, znalazłem stylizację elementów (szczególnie zaokrąglenie narożnika, aby wskazać przynależność do zestawu) nie działa poprawnie.

Z tego co mogę powiedzieć, są 2 problemy:

Pierwszym jest to, że po prostu wyzwalanie „Utwórz” w rzeczywistości nie odświeżenie stylizacji wszystkich collapsibles w zestawie. aby to zrobić musisz ...

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

Ale, jest jeszcze gorszy problem. JQM "oznacza" ostatni element w zestawie jako "ostatni element". Ten fakt jest następnie wykorzystywany do określenia sposobu stylizacji ostatniego elementu podczas jego rozwijania/zwinięcia.

Ponieważ Knockout nie odbudowuje całego zestawu (dla prędkości), za każdym razem, gdy wywołuje się metodę odświeżania, JQM sumiennie zaznacza ostatni element jako "ostatni", ale nigdy nie usuwa znaków z poprzednich elementów. W rezultacie, jeśli zaczniesz od pustej listy, KAŻDY element zostanie oznaczony jako "ostatni", a stylizacja się nie powiedzie.

Mam szczegółową poprawkę dotyczącą tego na github w raporcie o problemie.

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