2012-05-01 19 views
6

Bir uygulama geliştirmek için jQuery Mobile (jQM) ve Knockout.js (ko) kullanıyorum. Bu uygulamada, sürekli güncellenmekte olan bir web servisi tarafından tanımlanan değişken sayıda buton üretmem gerekiyor.Knockout.js aracını kullanarak dinamik bir jQuery Mobile düğmeleri kümesine nasıl bağlarım?

Yani, benim işaretlemesinde ben vardır:

<div id="answerPage-buttons" data-bind="foreach: buttonsLabels"> 
    <button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" /> 
</div> 

buttonLabels web hizmetinden döndürülen kısa dizeleri listesidir. Bu,

self.buttonLabels = ko.observableArray(); 

Bu, "jQM stillenmiş" düğmeler olmadığında her şey düzgün çalışır. Bununla birlikte, bunları güncelleme sırasında

sorunları ile karşılaştığımda.

Sorun, jQM'nin tüm güzel ve mobil görünüme sahip olmasını sağlamak için düğmelerini div (bir kardeşle birlikte) içinde kaydırması gibi görünüyor. Bununla birlikte, koda güncellemeleri bağlamalar aracılığıyla uygularsa, yalnızca etiketleri kaldırır ve çevreleyen şeyleri bırakır ve yeni düğme etiketleri ekler - bunlar da jQM tetikleyici çağrısı ile biçimlendirilir.

Sonuç olarak, sürekli yeni bir düğme listesiyle sonuçlanacağım - sadece son set çalışır durumda (önceki düğmeler düğme öğelerinin kaldırılmasıyla tıkanmış gibi, ancak tüm stil kalıyor).

ben bu sorunu çözmek için başardınız, ben gözlemlenebilir güncellenir hemen sonra aşağıdaki çağrıyı yerleştirerek, düşünüyorum:

$("#answerPage-buttons div.ui-btn").remove(); 

Ancak, benim duygu muhtemelen daha iyi bir yaklaşım var olmasıdır. Var mı?

+2

Düğmeleri elle oluşturabilir ve yönetebilirsiniz. Düğmeyi sık sık güncellemek zorunda kaldığımda bunu yapıyorum. Sonra ihtiyacım olan öğeyi (simge, href, metin) güncellerim ve "kabuğu" olduğu gibi bırakırım. Bir "kabuk" istiyorsan haberim olsun? – frequent

cevap

3

Bir çözüm buldum.

Düğmeleri bir div ile çevreliyorum, işe yarayacak gibi görünüyor - ör. jQM tarafından eklenen biçimlendirme ko tarafından çoğaltılan "içeride" işaretleme kalır çünkü bu tahmin ediyorum

<div id="answerPage-buttons" data-bind="foreach: buttonsLabels"> 
    <div> 
     <button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" /> 
    </div> 
</div> 

olduğunu. Div olmadan jQM, ko foreach bağlayıcısını içeren etiketin hemen alt öğesi olan düğme etiketini sarar.

+0

Gerçekten çok, çok teşekkür ederim !!!! Beni bir gün kurtardın! –

İlgili konular