SORU
22 Mayıs 2011, Pazar

Nasıl bir mimari için bir web-jquery-mobile kullanarak ve knockoutjs

Bir mobil uygulama oluşturmak için, hiçbir şey daha fazla demlenmiş ama/css ve JavaScript html istiyorum. JavaScript ile bir web uygulaması oluşturmak için nasıl iyi bir bilgi var iken, DV-mobile gibi bir çerçeve içine bir bakayım dedim.

İlk başta, DV-mobil hiçbir şey yoktu daha sonra da mobil tarayıcılar hedef alan bir widget çerçeve düşündüm. Çok benzer uı jquery ama mobil dünya için. Ama jquery-mobile daha fazla olduğunu fark ettim. Mimari bir grup ve açıklayıcı bir html sözdizimi ile uygulamalar oluşturmak için izin ile birlikte geliyor. En kolay akla gelebilecek uygulaması için, kendini, hepimiz daha az çalışmak gibi çünkü, değil mi? cool () JavaScript tek bir satır yazmaya gerek kalmayacaktı

Uygulamalar ve açıklayıcı bir html sözdizimi kullanarak oluşturma yaklaşımı desteklemek için, iyi bir knockoutjs ile jquery-mobile birleştirmek için olduğunu düşünüyorum. Knockoutjs MVVM süper güçler JavaScript dünyaya WPF/Silverlight bilinen getirmeyi amaçlayan tarafı istemci MVVM çerçeve.

Bana MVVM için yeni bir dünya. Zaten bu konuda çok şey okudum ederken, aslında bunu kendim için hiç daha önce kullanmadım.

Yani bu yazıyı bir uygulamayı jquery-mobile ve knockoutjs kullanarak birlikte mimarlık hakkında. Benim fikrimdi için yazmak yaklaşım bu ben ile geldi sonra bakmak için birkaç saat, ve bazı jquery-mobile/nakavt yoda, açıklama, gösterme bana neden berbat bir şey ve ben neden yapmayayım mı programlamada ilk yer ;-)

Html

jquery-mobile mi iyi bir iş sayfaların temel yapı modeli sağlar. Benim sayfaları ajax ile sonradan yüklenecek olabilir farkında olduğum sürece, sadece bir index.html dosya içinde tüm tutmaya karar verdi. Bu temel senaryoda şeyler üstünde kalmak için çok zor olmamalı Bu yüzden bu konuda iki sayfa söz ediyoruz.

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Page Title</title> 
  <link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.0a4.1.css" />
  <link rel="stylesheet" href="app/base/css/base.css" />
  <script src="libs/jquery/jquery-1.5.0.min.js"></script>
  <script src="libs/knockout/knockout-1.2.0.js"></script>
  <script src="libs/knockout/knockout-bindings-jqm.js" type="text/javascript"></script>
  <script src="libs/rx/rx.js" type="text/javascript"></script>
  <script src="app/App.js"></script>
  <script src="app/App.ViewModels.HomeScreenViewModel.js"></script>
  <script src="app/App.MockedStatisticsService.js"></script>
  <script src="libs/jquery-mobile/jquery.mobile-1.0a4.1.js"></script>  
</head> 
<body> 

<!-- Start of first page -->
<div data-role="page" id="home">

    <div data-role="header">
        <h1>Demo App</h1>
    </div><!-- /header -->

    <div data-role="content">   

    <div class="ui-grid-a">
        <div class="ui-block-a">
            <div class="ui-bar" style="height:120px">
                <h1>Tours today (please wait 10 seconds to see the effect)</h1>
                <p><span data-bind="text: toursTotal"></span> total</p>
                <p><span data-bind="text: toursRunning"></span> running</p>
                <p><span data-bind="text: toursCompleted"></span> completed</p>     
            </div>
        </div>
    </div>

    <fieldset class="ui-grid-a">
        <div class="ui-block-a"><button data-bind="click: showTourList, jqmButtonEnabled: toursAvailable" data-theme="a">Tour List</button></div>  
    </fieldset>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>by Christoph Burgdorf</h4>
    </div><!-- /header -->
</div><!-- /page -->

<!-- tourlist page -->
<div data-role="page" id="tourlist">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p><a href="#home">Back to home</a></p> 
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>by Christoph Burgdorf</h4>
    </div><!-- /header -->
</div><!-- /page -->

</body>
</html>

JavaScript

Hadi eğlenceli kısmı - JavaScript gel!

Uygulama katman hakkında düşünmeye başladığımda, aklınızda bazı şeyleri (örneğin, test edilebilirlik, gevşek bağlantı) oldu. Benim dosyaları split ve şeyler yorum yapmak için neden başka bir yere bir şey seçtim... gibi karar verdim nasıl size göstereceğim

App.js

var App = window.App = {};
App.ViewModels = {};

$(document).bind('mobileinit', function(){
    // while app is running use App.Service.mockStatistic({ToursCompleted: 45}); to fake backend data from the console
    var service = App.Service = new App.MockedStatisticService();    

  $('#home').live('pagecreate', function(event, ui){
        var viewModel = new App.ViewModels.HomeScreenViewModel(service);
        ko.applyBindings(viewModel, this);
        viewModel.startServicePolling();
  });
});

App.js benim uygulama için bir giriş noktası. Uygulama nesne oluşturur ve görünüm modelleri için bir ad (yakında gelecek) sağlar. Bu listenesmobileinitjquery-mobile sağlayan olay.

Ajax tören daha sonra bakacağız) bir örnek yaratıyorum bakın ve değişken kaydedebilirsiniz "dedi. hizmet

Ben de yukarı kancapagecreatehizmet örneği geçirilen alır viewModel bir örnek oluşturmak giriş sayfası için olay. Bu nokta benim için çok önemlidir. Biri varsa, bu farklı yapılması gerektiğini düşünüyorsa, lütfen düşüncelerinizi paylaşın!

Nokta görünüm model bir servis (GetTour/, SaveTour vb.) üzerinde çalışması gerekir. Ama ViewModel bu konuda başka bir şey bilmek istemiyorum. Yani bizim durumumuzda, örneğin, sadece arka uç geliştirilen henüz gelmediği için alay ajax bir hizmet geçiyorum.

Bahsetmem gereken başka bir şey ViewModel gerçek görünümü hakkında sıfır bilgiye sahiptir. Bu ko aramamın sebebi de bu.applyBindings(bu viewModel) içindepagecreateişleyici. Görünüm modeli daha kolay test yapmak için gerçek görünümü ayrı tutmak istedim.

App.ViewModels.HomeScreenViewModel.js

(function(App){
  App.ViewModels.HomeScreenViewModel = function(service){
    var self = {}, disposableServicePoller = Rx.Disposable.Empty;

    self.toursTotal = ko.observable(0);
    self.toursRunning = ko.observable(0);
    self.toursCompleted = ko.observable(0);
    self.toursAvailable = ko.dependentObservable(function(){ return this.toursTotal() > 0; }, self);
    self.showTourList = function(){ $.mobile.changePage('#tourlist', 'pop', false, true); };        
    self.startServicePolling = function(){  
        disposableServicePoller = Rx.Observable
            .Interval(10000)
            .Select(service.getStatistics)
            .Switch()
            .Subscribe(function(statistics){
                self.toursTotal(statistics.ToursTotal);
                self.toursRunning(statistics.ToursRunning); 
                self.toursCompleted(statistics.ToursCompleted); 
            });
    };
    self.stopServicePolling = disposableServicePoller.Dispose;      

    return self; 
  };
})(App)

En knockoutjs modeli örnek nesne değişmez sözdizimini kullanarak görünüm bulmak olsa da, bir 'öz' yardımcı nesneleri. geleneksel işlevi sözdizimi kullanıyorum Temelde, zevk meselesi. Ama referans başka bir gözlemlenebilir özelliği sahip olmak istiyorsanız, daha az simetrik kılan bir nesne değişmez yazabilirsiniz. Farklı bir sözdizimi seçiyorum nedenlerinden biri.

Önümüzdeki nedeni daha önce de bahsettiğim gibi parametre olarak geçebilirim hizmettir.

Eğer doğru yolu seçmek var mı emin değilim bu model görünümü ile bir şey daha var. Ajax hizmeti periyodik olarak anket sunucudan sonuçlar almak istiyorum. Yani, uygulamak için seçilen varstartServicePolling/** yöntemleri bunu yapmak için stopServicePolling. Fikir üretimi) yapar seçim başlatın ve kullanıcı farklı bir sayfaya geçtiğinde onu durdurmak.

Hizmet yoklamak için kullanılan sözdizimi göz ardı edebilirsiniz. RxJS büyü. İçinde gördüğünüz gibi yoklama eminim olacak ve sonuç ile gözlemlenebilir özelliklerini sadece güncellemeAbone ol(function(istatistik){..})bölüm.

App.MockedStatisticsService.js

Tamam, Sadece bir şey göstermek kaldı. Gerçek bir hizmet uygulaması. Fazla detaya burada girmeyeceğim. Bazı sayılar ne zaman döner bu sadece bir taklitgetStatisticsdenir. Başka bir yöntem yokturmockStatisticstarayıcılar app çalışırken js konsol üzerinden yeni değerleri ayarlamak için kullanıyorum.

(function(App){
    App.MockedStatisticService = function(){
        var self = {},
        defaultStatistic = {
            ToursTotal: 505,
            ToursRunning: 110,
            ToursCompleted: 115 
        },
        currentStatistic = $.extend({}, defaultStatistic);;

        self.mockStatistic = function(statistics){
            currentStatistic = $.extend({}, defaultStatistic, statistics);
        };

        self.getStatistics = function(){        
            var asyncSubject = new Rx.AsyncSubject();
            asyncSubject.OnNext(currentStatistic);
            asyncSubject.OnCompleted();
            return asyncSubject.AsObservable();
        };

        return self;
    };
})(App)

Tamam, ben başlangıçta yazmayı planladığımız gibi çok fazla yazdım. Parmağım acıyor, benim köpek bana bir yürüyüş için onları almak istiyor ve bitkin hissediyorum. Pek çok şey eksik ve yazım hataları ve dilbilgisi hataları bir demet koydum eminim. Açık olmayan bir şey ve yayınlandıktan sonra güncelleme yaparsam, bana bağırma.

Nakil bir soru gibi gelebilir ama değil aslında. Sizin düşüncelerinizi iyi veya kötü olduğunu düşünüyorsan ya da eğer bir şeyler eksik benim yaklaşım ve paylaşmak istiyorum.

GÜNCELLEME

Büyük popülerlik nedeniyle bu yazıyı kazanmış ve birkaç kişi bunu bana sordu, çünkü, github üzerinde bu örnek kod var:

https://github.com/cburgdorf/stackoverflow-knockout-example

Sıcakken alın!

CEVAP
3 HAZİRAN 2011, Cuma

Not:JQuery gibi 1.7, .live() yöntemi önerilmiyor. .on() olay işleyicileri eklemek için kullanın. JQuery eski sürümleri kullanıcıların tercih .delegate() 20* *için kullanmalıdır.

Aynı şeyi (nakavt jquery) cep üzerinde çalışıyorum. Ne öğrendim hakkında bir blog yazısı yazmaya çalışıyorum ama işte arada bazı noktalar vardır. Ayrıca nakavt/jquery öğrenmeye çalışıyorum unutmayın.

Görünüm Modeli ve Sayfa

Bir (1) view-model nesne başına jQuery Mobil sayfa. sadece Aksi halde, birden çok kez tetiklenen tıklama olayları ile ilgili sorunlar alabilirsiniz.

Görüntüleme-Model ve tıklatın

Sadece ko kullanın.gözlemlenebilir alanları görünüm-modeller için tıklayın-olaylar.

ko.bir kez applyBinding

Mümkünse sadece Ara ko.her sayfa ve kullanımı ko için bir kez applyBinding.gözlemlenebilir ko aramak yerine.birden çok kez applyBinding.

pagehide ve ko.cleanNode

Bazı modeller görünüm pagehide kadar temizlemeyi unutmayın. ko.cleanNode bir WordPress kullanmak Cep rahatsız işleme - yeniden işleme html için neden gibi görünüyor. Ko kullanırsanız.veri rolün kaldırmak ve işlenmiş jQuery Mobile html eklemek gerekir bir sayfa kaynak kodu üzerinde cleanNode.

$('#field').live('pagehide', function() {
    ko.cleanNode($('#field')[0]);
});

pagehide ve tıklatın

Eğer tıklama olayları bağlama varsa temizlemeyi unutmayın .ui-btn-active. Bunu yapmanın en kolay yolu bu kod parçası kullanarak

$('[data-role="page"]').live('pagehide', function() {
    $('.ui-btn-active').removeClass('ui-btn-active');
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
MvvmDV-MobileJquery-mobileKnockout.js

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • hotstrikegently

    hotstrikegen

    26 AĞUSTOS 2011
  • Nick Pitera

    Nick Pitera

    8 NİSAN 2006
  • The CGBros

    The CGBros

    20 AĞUSTOS 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR