Çoklu görünüm modelleriyle çalışan Knockoutjs

Question

Knockout js jQueryMobile ile çalışıyorum ve sayfalar arasında taşırken birkaç sorunla karşılaşıyorum.

JQM'de sayfa geçişlerini tutmayı denemek istiyorum ve bu nedenle birden çok sayfa seçeneğini (bir html dosyasında tanımlı birden çok sayfa) kullanmak veya ek sayfaları varsayılan AJAX'ta ayrıntılı olarak DOM'a yüklemek istiyorum belgelerin davranış bölümü.

JQM Page Transition Documentation

Ben her birine ayrı bir görünüm modeli ile hem çalışan iki ayrı Knockoutjs sayfaları var. Her iki sayfa da JQM ile birbirine bağlanmaya çalışana kadar mükemmel çalışır.

Yüklemeyi denediğiniz sayfalar diğer sayfada eşleme ile ilgili bir hata alıyorum. Sadece her iki sayfanın da tek DOM'a yüklendiğini ve Knockout'un mevcut olmayan bağları seçtiğini varsayabilirim.

Bunu göstermek için jsFiddle yapmaya çalıştım.

JQM - Knockout Fiddle

ben hem JQM için yeni ve Nakavt böylece herhangi bir yardım takdir. Eğer tamamen yanlış yaklaşıyorsam, bana doğru yönde işaret eden birisini takdir ediyorum.

Tüm site için bir ViewModel kullanmaya çalışmak daha iyi olur muydu? Eğer değilse, Knockoutjs'i JQM ile nasıl kullanabilirim?

Answer 1

Tüm site için bir "ana" görünüm modeli kabul edilebilir. Şahsen

ko.applyBindings(new modelOne("Test", "One"), $("#one")[0]); 
ko.applyBindings(new modelTwo("Test", "Two"), $("#two")[0]); 

, Bence:

var masterViewModel = { 
    viewModelOne: ..., 
    viewModelTwo: ... 
} 

Alternatif olarak, .applyBindings ziyade bütün DOM daha bireysel unsurlara bağlamaları uygulamak aşırı çağırabilirsiniz: Sonra böyle bir şey yapabileceğini İkinci yaklaşımı tavsiye ederiz.

Answer 2

Şu anda jQuery Mobile 1.3.1 ve Knockout 2.2.1 kullanıyorum ve bu soruna kalıcı bir çözüm bulmadan önce birçok yaklaşımı denedim. Sabit kısım, bağlantılarını uygulamak için 'u bulmaktır. JQuery'nin hazır fonksiyonunu kullandığımda işe yaramadı. jQM documentation numaralı belgede, belge hazır işlevi yerine pageinit olayı geri çağrısına bağlanmayı buldum. Bununla birlikte, her seferinde bu geri çağırma işlemi bir sayfanın ilk kez oluşturulmasını sağlar, böylece 5 jQM sayfanız varsa 5 kez ateşlenebilir ve yalnızca KO bağlamaları bir kez uygulamanız gerekir.

Sonunda kullanılan çözüm aşağıdaki oldu:

$(document).bind('pageinit', function (e) { 
    var pageId = e.target.id; 

    for (var i in VIEW_MODELS) { 
     var vm = VIEW_MODELS[i]; 
     if (pageId == vm.View) { 
      ko.applyBindings(vm, document.getElementById(vm.View)); 
     } 
    } 
}); 

Bu ne yapıyor bir jQM sayfa başlangıçta işlenen her seferde, bu yaklaşan görünümle ilişkili görünüm modelini bulmak için benim bakış modelleri arar ve bağlamaları uygular. Sayfalar yalnızca ilk kez oluşturulduklarında başlatıldığı için, bu ilk oluşturma işlemine ve bir daha asla ko bağlayıcılarına uygulanacaktır.

Şimdiye kadar bu benim için çalışıyor, ancak Knockout ile jQM çok sayfalı şablonlar kullanarak diğer insanların fikirlerini veya çözümlerini duymayı çok isterim.