2011-09-15 20 views
10

Knockout js kullanıyorum. Bir dizi nesne içeren bir görünüm modelim var ve kullanıcının bir sihirbaz stili arabirimini kullanarak nesnelerden birini düzenlemesine izin vermek istiyorum. Sahip olduğum sorun, hangi seçeneklerin yapıldığına bağlı olarak sihirbazın farklı adımlar göstermesidir. (., Yani, farklı bir iletişim formu): Örneğin, kullanıcının adım 1 'Evet' seçerKnockout js modelinin sihirbaz stiline nasıl bağlanması UI

  • , kullanıcı o zaman adım 2b görüntülemek aşama 1 'Resim' seçerse sonra
  • adım 2a görüntüler

Bu, sihirbazın içindeki yolların doğrusal olmaması için devam eder.

Benim sorum I (bazı adımlar asla gösterilmez rağmen başlatmak ve bazı ekranlarda bağlamaları geçersiz olacaktır örn. Bağlanabilmektedir 5. adıma en görünümü modele olası tüm sihirbaz arayüzü adımları bağlamak yapmak viewModel.theObject.PropertyA.PropertyB.PropertyC() ​​ancak PropertyB, hala adım 1'de sıfırdır.

Görüntülendikçe UI adımlarına bağlanmak daha iyi bir yol olabilir ama benim sorunum o zaman adımın tamamlanmasından sonra modeli 'yok etmenin' iyi bir yolunun farkında değilim. orijinal listeden birden fazla nesneye bağlı adım!

cevap

13

Bunu yapmanın iyi bir yolu, görünüm modelinizin bir dizi adım olması ve kullanıcı arayüzünü "selectedStep" öğesine bağlamaktır. Ardından, her adım, kullanmak istediği şablonu dinamik olarak seçebilir (bu post'da olduğu gibi).

İşte fikrin kaba bir örneğidir: şablon bağlamaları seçildiğinde ne olursa olsun adım dayalı üreten/bağlayıcı/temizlik dinamik içerik kolları http://jsfiddle.net/rniemeyer/SSY6n/

Bu şekilde. Adımlar bir gözlemlenebilir Dizide bulunuyorsa, dinamik olarak adımlar ekleyebilirsiniz. Belki tüm olası adımların bir listesi vardır ve sonra kullanıcının seçimlerine göre geçerli olan adımları temsil eden bir "activeSteps" dizisine sahip olabilirsiniz.

+3

Biraz buradan güncellendi: http://jsfiddle.net/rniemeyer/FyuSD/ –

+0

Teşekkürler, Ryan. Çok ilginç ve yaratıcı bir yaklaşım. Şimdi benim gelişimime oldukça iyi geldiğim için, şu anda çalışıyor gibi görünen "data-bind = 'if: xxx" ifadeleriyle başlatılmamış özellikleri korumaya çalışabilirim. Çözümünüz çok daha şık olsa bile! PS - Blogunuzun büyük hayranı (www.knockmeout.net). Fantastik işi takip et! –

+0

@RPNiemeyer ASP.NET MVC 4 kullanıyorum ve ayrı bir sayfa (MVC kitaptan) kullanan bir "[Seri hale getirilebilir]" sihirbazım var ve ayrıca istemci tarafındaki doğrulama ile '[DataAnnotations]' da kullanıyor. Güncellenmiş örneğinizin sayfaları değiştirip değiştirmeyeceğini, ancak doğrulamayı kullanmaya devam edip etmeyeceğini merak ediyorum. Düşüncesi olan var mı? – REMESQ

İlgili konular