Bina Reaktif WordPress Eklentisi – Bölüm 1 – Backbone.js
Bu, “Bina Reaktif WordPress Eklentisi Serisi” nde 3 Madde 1/3.
Bina Reaktif WordPress Eklentisi – Bölüm 1 – Backbone.js
Reaktif WordPress Eklentileri Bina – Bölüm 2 – Vue.js
Reaktif WordPress eklentisi oluşturma – Bölüm 3 – Elm
Bu, reaktif kuvvet ön ucunun geliştirilmesiyle basit bir WordPress pano widget’ın nasıl oluşturulacağını gösteren bir dizi kısa makalenin başlangıcıdır. Her makalede aynı eklentiyi, her makalede PHP arka ucunda hafif bir değişiklik ile Exchange Front End geliştirme teknolojisini yapacağız. Bu makalede, ön uç için Backbone.js kullanacağız, ancak bu aynı zamanda bu serinin ilk makalesi olduğu için, arka ucun nasıl düzenlendiğini göstermek için biraz daha fazla şey olacak.
Reaktif mi? Reaktif programlama yeni değil, ancak son zamanlarda React ve Vue.js gibi teknoloji onu ilgi odağı haline getirdi. Burada birkaç kez reaktif teknolojiler hakkında yazdık. Jeff, WP REST API serisini React Native ile başlattı ve Gilbert React ve Laravel Lümeni hakkında yazmış ve bir tema için WP REST API ile Vue.js kullanmıştı. Reaktif stilin gelişiminin güzelliği, uygulamanız boyunca daha basit veri akışı ile ilgili sorunların daha fazla ayrılmasına yol açacak. Bu, kodun anlaşılması daha kolay, nedenler, yeniden düzenleyici ve hata ayıklama olduğu anlamına gelir.
Neden omurga.js? Backbone.js genellikle React ve Vue.js ile aynı şekilde tartışılamaz, bunun nedeni biraz daha yaşlı, çok şık olmaması ve yeni çocuklar gibi çadırların altında bazı “yeni sıcaklık” kullanmaması olabilir. Bloklarda. Örneğin Dom Yaması. Backbone.js reaktif stil JavaScript çerçevesidir; Modeldeki bir veri parçasını güncellersiniz ve ekran bileşenlerini, arka plandaki değişiklikleri korumak için sunucuya olan istek etkinleştirildiğinde değişiklikleri göstermek için mucizevi bir şekilde güncelleyin. Model ve görünümün ayrılması ve koleksiyonu ile kısaca reaktif bir akış getiren omurgalı.js sitesinde çok iyi bir başlangıç bölümü vardır. Ancak, bu serinin ilk makalesi için omurgalı.js kullanmanın ana nedeni. İlk eklentinin, zaten WordPress’ten olanlar dışında bile harici bağımlılığın dış bağımlılığı olmadan yapılmasını istiyorum! Backbone.js, 3.5 sürümünden beri WordPress’e resmi olarak dahil edilmiştir ve çekirdekte Grid Media Kütüphanesi ekranı gibi şeyler için kullanılmaktadır. Bu yüzden, eklenti ayarını kolaylaştırdığı için omurgalı.js kullanmak çok eğlenceli olacağını düşünüyorum. Eklentimiz, CRON WordPress programında olanları görüntülemek için gösterge paneli widget’ını yapan çok küçük bir WordPress eklentisi yapacak. Buna WP Cron Pixie denir ve bu görünüm …
Demoda Cron programının “bir saat”, “her gün iki kez” vb. Gibi olduğunu görebilirsiniz. Her birinin koşmayı bekleyen Cron etkinliklerinin bir listesi vardır. Her etkinliğin bir son tarihi vardır ve yanında (parantez içinde) etkinliğin ne kadar sürmesi gerektiğidir. Yakından dikkat ederseniz, olgunluk her 5 saniyede veya daha fazla değişene kadar süreye kadar. Her Cron olayının solunda “Now Now Running” simgesi (çift ok “ileri hızlı” gibi görünüyor). Simge tıklandığında, bitiş tarihi anında geçerli tarih ve saate ve vadesi “şimdi” olana kadar değiştirilir. Yaklaşık 5 saniye sonra ve daha sonra değil, şimdi çalıştırılması düzenlenen Cron etkinliğinde, programa dayanarak gelecekte bir yerde yeni bir zaman geçiriyor. Bu, Cron WordPress’in etkinliği işlediği ve çalışmanın bir dahaki sefere yapılması gerektiğini planladığı anlamına gelir. Program listesinde üç etkinlik “cron_pixie_*” görmüş olabilirsiniz. Bu Cron çalışması, WP Cron Pixie tarafından işlenme ve görüntülenme şeklini test etmek için belirli bir zamanla yapılmaktadır. Cron WordPress başarılı olduğunda hiçbir şey yapmadılar ve eklenti kaldırılırsa tekrar yapardı. Peki bu nasıl reaktif? Ayrıntıları daha sonra tartışacağız, ancak “Şimdi Çalıştırma” düğmesini tıklamanın, geçerli tarih ve saat ve olay dizisinin gerçekleştiği yerden yeni güncellendiğini hayal etmek kolay olabilir. Önemli bir parça, ekranda geçerli simge için “tıklama” olay etkinleştirildiğinde adlandırılan basit bir işlevdir: Çalışan işlev () çalıştırıldığında: ekrana bağlı modelden bazı değerler alınır.
Çok yakın olup olmadığı tarihini belirlemeye değer olup olmadığını görmek için hızlı bir inceleme var.
Time damgası (Sunucuda 1970-01-01 00:00:00 tarihinden bu yana saniye), şu anda olgunluğa saniyelerle (tutarlılık için sunucudan her iki değer) azaltarak “şimdi” olarak düzenlenmiştir.
Ekrana bağlı model yeni bir zaman damgası ile saklanır.
DOM’da yeni değerlerle güncellenecek bulgu unsurları yoktur. Özel binalar yok ve güncellenmiş modelleri depolamak için sunucuya Ajax çağrıları çalıştırın. Modelleri yalnızca yeni değerlerle ve değiştirilen modelleri yansıtacak şekilde güncellenen ekran ekranının (DOM) arkasına kaydediyoruz ve güncellenmiş veri modelleri oluşturulmuş olarak sunucuya çağırıyoruz.
CRON programını göstermenin bir başka yolu da reaktiftir. Genellikle reaktif arayüzleri kullanıcılarla etkileşime girebilecek düğmeler ve diğer giriş kontrolleri açısından düşünüyoruz, ancak zamanın da girdi olduğunu unutuyoruz. Arayüzün yalnızca kullanıcı girişine reaktif olmasını değil, aynı zamanda kullanıcı paraziti olmadan zaman zaman meydana gelen değişiklikleri yaşayıp tepki vermesini istiyorum. Zamanlayıcının perde arkasında yalnızca sunucudan geçerli CRON program verilerini ister ve CRON program koleksiyonunu günceller. Bunu daha sonra ayrıntılı olarak göreceksiniz, ancak sadece bu, görüntülenen verileri güncellemek için zaman regülatörü tarafından özel olarak yapılan hiçbir şey yoktur. Verileri güncellemek, değişimi yansıtacak şekilde kendilerini güncellemek için program verilerinin önem verdiği görüşleri anlatır.
Daha lüks bir uygulama, kanalı sunucuya açık tutmak ve gerçekleştiğinde bir güncelleme alması için, zaman düzenlemesi ile yok etmek yerine bir web soketi kullanabilir. Ancak, burada geliştirdiğimiz küçük eklentinin kapsamı çok ötesindedir! Zaman saymak yerine WordPress kalp atışı ateşini kullanmak mümkündür, ancak varsayılan frekansı dakikada bir kez bozmak istemiyorum. Tamam, sadece tanıtım sohbeti, bir WordPress eklentisi yapmaya başlayalım … sırt başka bir WordPress eklentisi gibi, her şey belirli başlık yorumları olan küçük bir PHP dosyasıyla başlar: wp-chron-pixie.php’de gerçekte olan her şey Admin_init’in eylemlerine bağlıdır, böylece eklenti sadece CRON_PIXIE sınıfının hayatta kaldığı yönetici sayfasında gerçekten bir şey yapmasıdır. Cron_pixie sınıfı arka uçtan et ve patatestir ve mevcut kullanıcının Cron programı ile oynamak için yeterli hak sahibi olup olmadığını kontrol ederek başlar ve eğer öyleyse, ilgilendikleri filtre kancalarının tüm eylemlerini ve işlevlerini kaydedin:
Daha yeni bir WP REST API’sinden ziyade admin-rajax.php WP_AJAX_* tarafından sağlanan eski eylemleri kullandığımızı göreceksiniz. Bu eklenti sürümü için ockbone.js kullandığımız gibi, daha önceki birçok WordPress sürümü ile denenmiş ve test edilmiş ve uyumlu bir şey kullanmak istiyorum. WP REST API için temel altyapı yalnızca mevcut kararlı sürüme (v4.4.x) eklenirken, admin-ajax.php neredeyse sonsuza kadar bir karşılaştırma olarak kullanılabilir. Bir sonraki makalede ateş dinlenmesine döneceğiz, ancak bu sürüm için hala “eski skool” olarak koruyoruz. Gösterge paneli başladığında adlandırılan küçük bir işlev var, widget’ın canlı olduğu yer WordPress olarak: /*** widget ve içerik geri çağrısını kaydeder. */ public işlevi add_dashboard_widget () {wp_add_dashboard_widget ($ this-> plugin_meta [‘slug’], $ this-> plugin_meta [‘name’], dizi ($ this, ‘dashboard_widget_content’); } wp_add_dashboard_widget, widget içeriği sağlamak için sınıfta Dashboard_widget_Content () işlevini kaydeder. WP_ADD_Dashboard_Widget’te ilk kez omurgalı.js koduna bir göz atıyoruz.
Aslında, bu daha çok undercore.js kodu içindir, çünkü değişken değiştirme ve biraz doğuştan gelen mantık ile HTML’ye dönüştürülebilen birkaç ekran şablonu vardır. Script Type = “Text/Şablon”> bölümü, bir web tarayıcısı tarafından işlenmeyecek bir şablondur ve yalnızca DOM’da dolaşım. Daha sonra, ockbone.view için bir şablon olarak kullanmak için kimlikleri aracılığıyla başvurabiliriz. JavaScript’e geldiğimizde nasıl kullanıldıklarını göreceksiniz. Dikkat edilmesi gereken önemli bir şey, şablondaki ‘dir. Şablonun yolu bu, ekranı çıktıya besleyen omurgalı.model’den verileri dürtmenize izin vermenin yolu budur. Ayrıca geçen html çıkışı için vardır ve eski javascript için kullanılır, sanki … yukarıdaki kodda başka … Yukarıdaki WP Cron Pixie demosunu gördükten sonra, CRON PRICE-Schedule-Item-TMPL şablonunu tanırsınız, burada CRON programı için ekran adının çıktığı ve ardından tam bir UL CRON etkinliği vardır. Benzer şekilde, Cron-Pixie-EVENT-Item-TMPL şablonu, Cron etkinliklerinin her biri için içerik yayınladı ve programın boş olayların bir listesi olduğunda biraz mantıkla. Değilse, “Şimdi Çalıştır” simgesini görüntüleyin
, Kancanın adı, vade ve saniye_due tempo değeri ekran çırçır işlevi () tarafından işlendiğinde zaman damgası. Cron-pixie-main kimliği ile div, tüm eylemlerin ön uçta meydana geldiği yerdir. Omurga burada. Kendisini Dom’a ve iş öncesi şablonun tüm iyiliğine koyacağız. Bunun hakkında daha fazla bilgi, söz ver. Üretim eklentisinin hazırlanmasını daha kolay korumak için, bu şablonu kendi dosyalarına taşımayı ve bunun yerine girmenizi şiddetle tavsiye ederim. Admin_footer’dan altlık.js şablonlarını görüntülemek daha da iyi olabilir. Enqueue_scripts işlevi, Styles sayfası hakkında WordPress’e anlatmak için sıradan şeyler yapar ve eklentiyi çıktıya eklemek istediğiniz javascript dosyaları hangi javascript dosyaları: WP_LOCITALICE_SCRIPSCRIPT WordPress işlevini, zamanlayıcıyı ne sıklıkta olarak değiştirmeyi istiyoruz, ne sıklıkta olarak kullanırız. Veriler (gelecekte yapılabilir) ve ilk verilerimiz görüntülenecek, böylece JavaScript ön ucunun sunucudan almasını beklemenize gerek kalmaz. Oldukça dağınık bir zamanlama verileri almak için kullanılan _get_schedules () işlevi, ancak takip etmek için mümkün olduğunca basit yazmaya çalışıyorum:
Nasıl ilişkili olduğu hakkında bir fikir edinmek için wp_get_schedules wordpress ve ilgili cron işlevinin belgelerini görmek daha iyidir, ancak daha derinden tartışmayacağım çünkü sabırsız olduğunuzu ve ön şeyleri istediğinizi hissediyorum.Bu nedenle, sadece her Ajax_schedules ve AJAX_EVENT’lerden WP_AJAX_CRON_PIXIE_Schedules ve WP_AJAX_CRON_PIXIE_EVENS’in eylemlerini işleyecek iki işlevden kısaca bahsedeceğim./*** JSON olarak Ajax isteğine bir yanıt gönderin.* * @param karışık $ tepki */ özel işlev _ajax_return ($ rep Response = true) {echo json_encode ($ yanıt);çıkış;} /*** JSON kodlu bir CRON programları listesini görüntüler.* * @return karışık | String | void */ genel işlev Ajax_schedules () {$ this-> _ ajax_return ($ this-> _ get_schedules ());
} Ajax_schedules yalnızca daha önce görüntülenen _get_schedules çağırır ve sonuçları JSON olarak bir yanıt gönderen ve daha sonra başka bir çıktı gönderilmeyecek şekilde komut dosyasından çıkan _ajax_return işlevine devam eder. Cron’un programında ön uçtan herhangi bir değişikliğe izin vermiyoruz, bu yüzden olsun ya da posta olsun, sadece GET gibi davranacağız. Ayrıca belirli CRON programları için istekleri de ele almıyoruz. Ajax_events işlevi, yayınlanan CRON olay verilerini kontrol eder ve CRON programını etkinlikteki değişiklikleri yansıtacak şekilde günceller ve ardından Cron’a vadesi gelen her olayı işlemesini söyler. Bu oldukça karmaşıktır, çünkü mevcut Cron koşu kolu olayına tekrarlananlarla zarar vermemeye dikkat eder ve bunun tersi de geçerlidir. Şu anda, CRON programı verilerinin bir parçası olarak sağlandığından, ön uçtan CRON olay verileri istemek için bir nedenimiz yok, bu yüzden temel olarak yalnızca sonrası istekleri ele alıyoruz, yalnızca istek denenirse başarısız olacaktır. Bu işlev oldukça çiğ ve üretime hazır değil. Belki gelecekte sertleştireceğiz.
Ajax_events’in yanı sıra class-cron-pixie.php için CRON test programını ve etkinliğini tam kaynakta düzenleyen diğer bazı işlevleri görebilirsiniz: https://github.com/ianmjones/wp-croni-pixie/blob/backbonejs /Src/src/srcudes /class-chron-pixie.php önde yukarıda önerildiği gibi yaparsanız, ön uç için JavaScript dosyasına nelerin dahil edileceği hakkında iyi bir fikriniz olabilir.Program verilerimizin veya etkinliklerimizin ne olduğunu, programları ve etkinlikleri barındıracak bazı koleksiyonlar ve her birinin programlarının, etkinliklerinin ve listelerinin (koleksiyonlarından) nasıl görüntüleneceğini belirlemek için bazı gizli görünümleri belirlemek için bazı modeller.
Yukarıdaki koda Main.js’ten bakarsanız, ortaya çıkabilecek ilk şey, etkinlikleri, etkinlikleri tanımlamak için doğrudan omurgalı.model veya omurgaya.Collection kullanmamamızdır. Bunun nedeni Varsayılan olarak Backbone.js, bir arka uç sunucuyla Chit-Chat için dinlenme ateşini kullanmayı bekliyor, ancak şu anda açıkça dinlenmeye dayanmayan admin-ajax.php wordpress kullanıyoruz. Bu nedenle, dosyanın en üstünde, WordPress tarafından sağlanan Global Ajaxurl değişkeninde tanımlandığı gibi, admin-aajax.php’ye normalden normal olan omurganın nasıl değiştirileceğini bilen İdari Dönüşüm İşlevinin yönetimini tanımlarız. Genellikle admin-ajax.php kullandığınızda, Ajax isteklerinde gönderilen verilerde dize eylemi sağlayarak WordPress’te hangi kancayı etkinleştirmek istediğinizi söylersiniz. Bu nedenle, küçük geçersiz kılma nesnemiz, ondan uzanan bir model veya koleksiyon üzerinde ayarlanan eylem alımını işler veya nesne kendi varsayılan eylemini kullanır (bu durumda “CRON_PIXIE_REQUEST” olarak ayarlanır, bu da her yere liderlik etmez). Uygulamalar tanımlandıktan sonra, Basemodel ve basecollection karışım işlevinde hazırlanır ve gerçek omurgadan uzatılır. Sonra Cron olaylarının modelinin tanımına ve koleksiyonuna geldik: /*** Single Cron etkinliği. */ Cronpixie.eventmodel = Basemodel.extend ({action: ‘cron_pixie_evens’, varsayılan: {program: null, aralık: null, kanca: null, args: null, zaman damgası: null, secons_due: null});
/*** Cron olaylarının koleksiyonu. */ Cronpixie.evencollection = basecollection.extend ({action: ‘cron_pixie_evens’, model: cronpixie.eventmodel}); Burada, model veya toplama verileri sunucu ile her senkronize edildiğinde aramak istediğimiz WordPress eylemlerini nerede tanımladığımızı görüyorsunuz. EventModel ayrıca verilerde görülmeyi beklediğimiz bir alan koleksiyonu içerir ve bu da sıfıra başlatılır. EventsCollection sadece bir olay koleksiyonu olduğunu öngörür. Main.js kodunu gördüğünüzde Schedulemodel ve Schedulescollection sınıfının çok benzer tanımlandığını göreceksiniz. Daha sonra Web sayfamızda EventModel/Collection ve Schedulemodel/Collection verilerini görüntüleyecek bir ekran görünür. /*** CRON programlarını listelemek için ana görünüm. */ Cronpixie.schedulesListView = ockbone.view.extend ({el: ‘#cron-pixie-main’, başlatma: function () {this.listento (this.collection, ‘senkronize’, this.render) ;: function (işlev ( ) {var $ list = this. $ (‘ul.cron-pixie-schedules’) .Empty (); this.collection.each.each (function) {var item = new cronpixie.schedulesListititItemView ({model: model: model: }); $ list.apend (item.render (). $ el);}, this); bunu döndür;}});
SchedulesListView, HTML’de gördüğümüz #cron-pixie-main div’e eklenen ana ekrandır, eklenti widget’ının içeriği olarak çıktı. SchedulesListView, veri toplama her senkronize edildiğinde içeriği oluşturmasını söylemek için kullanılan bir başlatma işlevine sahiptir. Bizim durumumuzda, Schedulescollection’a her söylediğimizde, ekranı sunucudan veri almak için ayarladığımızı. Bu ekran, veriler güncellendikten sonra oluşturma işlevini gerçekleştirecektir. Oluşturma işlevinde, önce ekranın kökü olan “Cron-Pixie-Main” div’deki “Cron-Pixie-Schedules” sınıfı ile listesiz listeden var olan programların listesini siliyoruz. Daha sonra koleksiyondaki her program için, verilerle SchedulesListitItemView’u açtı ve kendisini oluşturmasını ve daha sonra çıktıyı sıralanmayan listeye eklemesini emretti. /*** Tek bir Cron programının görüşü. */ Cronpixie.schedulesListitItemView = ockbone.view.extend ({tagName: ‘li’, className: ‘cron-pixie-schedule’, şablon: _.template (‘#cron-pixie-schedule-otem-tmpl’) .html ()), başlatın: function () {this.listento (this.model, ‘değiştir’, this.render); this.listento (this.model, ‘yok’, this.remove);}, render: function () {var html = this.template (this.model.tojson ()); this. $ el.html (html); // cron programının olaylarını oluşturması gerekiyor. var $ list = this. $ (‘ul .Cron-pixie-Elevents ‘) .Empty (); var Events = new Cronpixie.evenCollection (this.model.get (‘ etkinlikler ‘)); etkinlikler.each (function (model) {var item = yeni cronpixie.eventsListItemView ( {Model: Model});
$ list.Append (item.render (). $ el); }, Bu); Bunu iade edin; }}); SchedulesListitItemView her kullanıldığında, “Cron-Pixie-Schedule” sınıfı ile kendi LI öğesini ayarladı. TagName: Li ve ClassName: ‘Cron-Pixie-Schedule’ özelliği budur. Daha önce tartışıldığı gibi, widget’ın ilk içeriğinin çıktısı hakkında konuşurken, SchedulesListITIMView Undercore.js şablonunun işlevselliğini kullanarak DOM “#cron-pixie-schedule-item-tmpl” öğesini çıktısı için bir şablon olarak işlemek için. Oluşturma işlevi geçerli model verilerini şablona uygular ve ardından görüntüleme içeriğini HTML çıkışına ayarlar. Şablon işlevi, sıradan bir eski JavaScript nesnesi yerine JSON tarafından teşvik edilen verilerle çalışır, bu nedenle bu.model.tojson () ‘nın kullanılması. Çizelge öğesini görüntüleyin, tüm program türevi CRON olaylarını görüntüleme ihtiyacı ile biraz karmaşıktır. Ancak, aynı modelin, bir program modelinde bir program koleksiyonunu yukarıdaki ana SchedulesListView ekranına dönüştürmek için kullanılan bir Cron olayları koleksiyonunu oluşturmak için kullanıldığını göreceksiniz. Bu sadece her etkinlik için OpentListITIMView görünümünün ortaya çıkmasını sağlar. Tartışmak için sadece bir görünüm daha bırakır: /*** Tek bir Cron etkinliğinin görüşü. */ Cronpixie.eventsListInview = ockbone.view.extend ({tagname: ‘li’, className: ‘cron-pixie-event’, şablon: _.template ($ (‘#cron-pixie-event-item-tmpl’) .html ()), başlatın: function () {this.listento (this.model, ‘değiştir’, this.render); this.listento (this.model, ‘yok’, this.remove);}, olaylar: {‘Tıklayın .cron-pixie-Eevent-Run:’ Runnow ‘
}, rendering: function () {var html = this.template (this.model.tojson ()); Bu. $ El.html (html); Bunu iade edin; }, Runnow: function () {cronpixie.pausetimer (); // Yalnızca bir sonraki yenilemeden önce değilse güncellemeyi çalıştırmaya zahmet edin. var saniye_due = this.model.get (‘saniye_due’); if (Seconds_due> cronpixie.timer_period) {var zaman damgası = this.model.get (‘zaman damgası’) – saniye_due; this.model.save ({Timestamp: Timestamp, Seconds_Due: 0}, {başarı: işlev (model, yanıt, seçenekler) { / * console.log (optionlar); console.log (yanıt); * / cronpixie.runtimer ( );}, hata: işlev (model, yanıt, opsiyon) { / * console.log (seçenekler); console.log (yanıt); * / cronpixie.runtimer ();}} }}}); OpentsListItemView sınıfında aşağıdaki biti elde edene kadar yeni bir şey yoktur: Olaylar: {‘Tık. Eklenti “bölümü? Bu olay özelliği, duyulacak olayları ve yanıt olarak hangi işlevlerin etkinleştirileceğini belirlemek için gereken tek şeydir. Bu durumda, hedef DOM öğesinde “Cron-Pixie-EVENT-RUN” sınıfına sahip olduğunda, “Şimdi Çalışma” simgesini yaparken tıklama olaylarını ararız. Ekranın geri kazanma yardımcı programının aşağıdaki işlevini tartışmayacağım, bu omurgaya özel bir şey değil ve yalnızca “saniye olgunluğa” değerini insanlar tarafından okunması daha kolay olan dizelere değiştirir. Yani, DisplayIntVal (12345); “3J 25m 45s” üretecek
Bina Reaktif WordPress Eklentisi – Bölüm 1 – Backbone.js
Reaktif WordPress Eklentileri Bina – Bölüm 2 – Vue.js
Reaktif WordPress eklentisi oluşturma – Bölüm 3 – Elm
Bu, reaktif kuvvet ön ucunun geliştirilmesiyle basit bir WordPress pano widget’ın nasıl oluşturulacağını gösteren bir dizi kısa makalenin başlangıcıdır. Her makalede aynı eklentiyi, her makalede PHP arka ucunda hafif bir değişiklik ile Exchange Front End geliştirme teknolojisini yapacağız. Bu makalede, ön uç için Backbone.js kullanacağız, ancak bu aynı zamanda bu serinin ilk makalesi olduğu için, arka ucun nasıl düzenlendiğini göstermek için biraz daha fazla şey olacak.
Reaktif mi? Reaktif programlama yeni değil, ancak son zamanlarda React ve Vue.js gibi teknoloji onu ilgi odağı haline getirdi. Burada birkaç kez reaktif teknolojiler hakkında yazdık. Jeff, WP REST API serisini React Native ile başlattı ve Gilbert React ve Laravel Lümeni hakkında yazmış ve bir tema için WP REST API ile Vue.js kullanmıştı. Reaktif stilin gelişiminin güzelliği, uygulamanız boyunca daha basit veri akışı ile ilgili sorunların daha fazla ayrılmasına yol açacak. Bu, kodun anlaşılması daha kolay, nedenler, yeniden düzenleyici ve hata ayıklama olduğu anlamına gelir.
Neden omurga.js? Backbone.js genellikle React ve Vue.js ile aynı şekilde tartışılamaz, bunun nedeni biraz daha yaşlı, çok şık olmaması ve yeni çocuklar gibi çadırların altında bazı “yeni sıcaklık” kullanmaması olabilir. Bloklarda. Örneğin Dom Yaması. Backbone.js reaktif stil JavaScript çerçevesidir; Modeldeki bir veri parçasını güncellersiniz ve ekran bileşenlerini, arka plandaki değişiklikleri korumak için sunucuya olan istek etkinleştirildiğinde değişiklikleri göstermek için mucizevi bir şekilde güncelleyin. Model ve görünümün ayrılması ve koleksiyonu ile kısaca reaktif bir akış getiren omurgalı.js sitesinde çok iyi bir başlangıç bölümü vardır. Ancak, bu serinin ilk makalesi için omurgalı.js kullanmanın ana nedeni. İlk eklentinin, zaten WordPress’ten olanlar dışında bile harici bağımlılığın dış bağımlılığı olmadan yapılmasını istiyorum! Backbone.js, 3.5 sürümünden beri WordPress’e resmi olarak dahil edilmiştir ve çekirdekte Grid Media Kütüphanesi ekranı gibi şeyler için kullanılmaktadır. Bu yüzden, eklenti ayarını kolaylaştırdığı için omurgalı.js kullanmak çok eğlenceli olacağını düşünüyorum. Eklentimiz, CRON WordPress programında olanları görüntülemek için gösterge paneli widget’ını yapan çok küçük bir WordPress eklentisi yapacak. Buna WP Cron Pixie denir ve bu görünüm …
Demoda Cron programının “bir saat”, “her gün iki kez” vb. Gibi olduğunu görebilirsiniz. Her birinin koşmayı bekleyen Cron etkinliklerinin bir listesi vardır. Her etkinliğin bir son tarihi vardır ve yanında (parantez içinde) etkinliğin ne kadar sürmesi gerektiğidir. Yakından dikkat ederseniz, olgunluk her 5 saniyede veya daha fazla değişene kadar süreye kadar. Her Cron olayının solunda “Now Now Running” simgesi (çift ok “ileri hızlı” gibi görünüyor). Simge tıklandığında, bitiş tarihi anında geçerli tarih ve saate ve vadesi “şimdi” olana kadar değiştirilir. Yaklaşık 5 saniye sonra ve daha sonra değil, şimdi çalıştırılması düzenlenen Cron etkinliğinde, programa dayanarak gelecekte bir yerde yeni bir zaman geçiriyor. Bu, Cron WordPress’in etkinliği işlediği ve çalışmanın bir dahaki sefere yapılması gerektiğini planladığı anlamına gelir. Program listesinde üç etkinlik “cron_pixie_*” görmüş olabilirsiniz. Bu Cron çalışması, WP Cron Pixie tarafından işlenme ve görüntülenme şeklini test etmek için belirli bir zamanla yapılmaktadır. Cron WordPress başarılı olduğunda hiçbir şey yapmadılar ve eklenti kaldırılırsa tekrar yapardı. Peki bu nasıl reaktif? Ayrıntıları daha sonra tartışacağız, ancak “Şimdi Çalıştırma” düğmesini tıklamanın, geçerli tarih ve saat ve olay dizisinin gerçekleştiği yerden yeni güncellendiğini hayal etmek kolay olabilir. Önemli bir parça, ekranda geçerli simge için “tıklama” olay etkinleştirildiğinde adlandırılan basit bir işlevdir: Çalışan işlev () çalıştırıldığında: ekrana bağlı modelden bazı değerler alınır.
Çok yakın olup olmadığı tarihini belirlemeye değer olup olmadığını görmek için hızlı bir inceleme var.
Time damgası (Sunucuda 1970-01-01 00:00:00 tarihinden bu yana saniye), şu anda olgunluğa saniyelerle (tutarlılık için sunucudan her iki değer) azaltarak “şimdi” olarak düzenlenmiştir.
Ekrana bağlı model yeni bir zaman damgası ile saklanır.
DOM’da yeni değerlerle güncellenecek bulgu unsurları yoktur. Özel binalar yok ve güncellenmiş modelleri depolamak için sunucuya Ajax çağrıları çalıştırın. Modelleri yalnızca yeni değerlerle ve değiştirilen modelleri yansıtacak şekilde güncellenen ekran ekranının (DOM) arkasına kaydediyoruz ve güncellenmiş veri modelleri oluşturulmuş olarak sunucuya çağırıyoruz.
CRON programını göstermenin bir başka yolu da reaktiftir. Genellikle reaktif arayüzleri kullanıcılarla etkileşime girebilecek düğmeler ve diğer giriş kontrolleri açısından düşünüyoruz, ancak zamanın da girdi olduğunu unutuyoruz. Arayüzün yalnızca kullanıcı girişine reaktif olmasını değil, aynı zamanda kullanıcı paraziti olmadan zaman zaman meydana gelen değişiklikleri yaşayıp tepki vermesini istiyorum. Zamanlayıcının perde arkasında yalnızca sunucudan geçerli CRON program verilerini ister ve CRON program koleksiyonunu günceller. Bunu daha sonra ayrıntılı olarak göreceksiniz, ancak sadece bu, görüntülenen verileri güncellemek için zaman regülatörü tarafından özel olarak yapılan hiçbir şey yoktur. Verileri güncellemek, değişimi yansıtacak şekilde kendilerini güncellemek için program verilerinin önem verdiği görüşleri anlatır.
Daha lüks bir uygulama, kanalı sunucuya açık tutmak ve gerçekleştiğinde bir güncelleme alması için, zaman düzenlemesi ile yok etmek yerine bir web soketi kullanabilir. Ancak, burada geliştirdiğimiz küçük eklentinin kapsamı çok ötesindedir! Zaman saymak yerine WordPress kalp atışı ateşini kullanmak mümkündür, ancak varsayılan frekansı dakikada bir kez bozmak istemiyorum. Tamam, sadece tanıtım sohbeti, bir WordPress eklentisi yapmaya başlayalım … sırt başka bir WordPress eklentisi gibi, her şey belirli başlık yorumları olan küçük bir PHP dosyasıyla başlar: wp-chron-pixie.php’de gerçekte olan her şey Admin_init’in eylemlerine bağlıdır, böylece eklenti sadece CRON_PIXIE sınıfının hayatta kaldığı yönetici sayfasında gerçekten bir şey yapmasıdır. Cron_pixie sınıfı arka uçtan et ve patatestir ve mevcut kullanıcının Cron programı ile oynamak için yeterli hak sahibi olup olmadığını kontrol ederek başlar ve eğer öyleyse, ilgilendikleri filtre kancalarının tüm eylemlerini ve işlevlerini kaydedin:
Daha yeni bir WP REST API’sinden ziyade admin-rajax.php WP_AJAX_* tarafından sağlanan eski eylemleri kullandığımızı göreceksiniz. Bu eklenti sürümü için ockbone.js kullandığımız gibi, daha önceki birçok WordPress sürümü ile denenmiş ve test edilmiş ve uyumlu bir şey kullanmak istiyorum. WP REST API için temel altyapı yalnızca mevcut kararlı sürüme (v4.4.x) eklenirken, admin-ajax.php neredeyse sonsuza kadar bir karşılaştırma olarak kullanılabilir. Bir sonraki makalede ateş dinlenmesine döneceğiz, ancak bu sürüm için hala “eski skool” olarak koruyoruz. Gösterge paneli başladığında adlandırılan küçük bir işlev var, widget’ın canlı olduğu yer WordPress olarak: /*** widget ve içerik geri çağrısını kaydeder. */ public işlevi add_dashboard_widget () {wp_add_dashboard_widget ($ this-> plugin_meta [‘slug’], $ this-> plugin_meta [‘name’], dizi ($ this, ‘dashboard_widget_content’); } wp_add_dashboard_widget, widget içeriği sağlamak için sınıfta Dashboard_widget_Content () işlevini kaydeder. WP_ADD_Dashboard_Widget’te ilk kez omurgalı.js koduna bir göz atıyoruz.
Aslında, bu daha çok undercore.js kodu içindir, çünkü değişken değiştirme ve biraz doğuştan gelen mantık ile HTML’ye dönüştürülebilen birkaç ekran şablonu vardır. Script Type = “Text/Şablon”> bölümü, bir web tarayıcısı tarafından işlenmeyecek bir şablondur ve yalnızca DOM’da dolaşım. Daha sonra, ockbone.view için bir şablon olarak kullanmak için kimlikleri aracılığıyla başvurabiliriz. JavaScript’e geldiğimizde nasıl kullanıldıklarını göreceksiniz. Dikkat edilmesi gereken önemli bir şey, şablondaki ‘dir. Şablonun yolu bu, ekranı çıktıya besleyen omurgalı.model’den verileri dürtmenize izin vermenin yolu budur. Ayrıca geçen html çıkışı için vardır ve eski javascript için kullanılır, sanki … yukarıdaki kodda başka … Yukarıdaki WP Cron Pixie demosunu gördükten sonra, CRON PRICE-Schedule-Item-TMPL şablonunu tanırsınız, burada CRON programı için ekran adının çıktığı ve ardından tam bir UL CRON etkinliği vardır. Benzer şekilde, Cron-Pixie-EVENT-Item-TMPL şablonu, Cron etkinliklerinin her biri için içerik yayınladı ve programın boş olayların bir listesi olduğunda biraz mantıkla. Değilse, “Şimdi Çalıştır” simgesini görüntüleyin
, Kancanın adı, vade ve saniye_due tempo değeri ekran çırçır işlevi () tarafından işlendiğinde zaman damgası. Cron-pixie-main kimliği ile div, tüm eylemlerin ön uçta meydana geldiği yerdir. Omurga burada. Kendisini Dom’a ve iş öncesi şablonun tüm iyiliğine koyacağız. Bunun hakkında daha fazla bilgi, söz ver. Üretim eklentisinin hazırlanmasını daha kolay korumak için, bu şablonu kendi dosyalarına taşımayı ve bunun yerine girmenizi şiddetle tavsiye ederim. Admin_footer’dan altlık.js şablonlarını görüntülemek daha da iyi olabilir. Enqueue_scripts işlevi, Styles sayfası hakkında WordPress’e anlatmak için sıradan şeyler yapar ve eklentiyi çıktıya eklemek istediğiniz javascript dosyaları hangi javascript dosyaları: WP_LOCITALICE_SCRIPSCRIPT WordPress işlevini, zamanlayıcıyı ne sıklıkta olarak değiştirmeyi istiyoruz, ne sıklıkta olarak kullanırız. Veriler (gelecekte yapılabilir) ve ilk verilerimiz görüntülenecek, böylece JavaScript ön ucunun sunucudan almasını beklemenize gerek kalmaz. Oldukça dağınık bir zamanlama verileri almak için kullanılan _get_schedules () işlevi, ancak takip etmek için mümkün olduğunca basit yazmaya çalışıyorum:
Nasıl ilişkili olduğu hakkında bir fikir edinmek için wp_get_schedules wordpress ve ilgili cron işlevinin belgelerini görmek daha iyidir, ancak daha derinden tartışmayacağım çünkü sabırsız olduğunuzu ve ön şeyleri istediğinizi hissediyorum.Bu nedenle, sadece her Ajax_schedules ve AJAX_EVENT’lerden WP_AJAX_CRON_PIXIE_Schedules ve WP_AJAX_CRON_PIXIE_EVENS’in eylemlerini işleyecek iki işlevden kısaca bahsedeceğim./*** JSON olarak Ajax isteğine bir yanıt gönderin.* * @param karışık $ tepki */ özel işlev _ajax_return ($ rep Response = true) {echo json_encode ($ yanıt);çıkış;} /*** JSON kodlu bir CRON programları listesini görüntüler.* * @return karışık | String | void */ genel işlev Ajax_schedules () {$ this-> _ ajax_return ($ this-> _ get_schedules ());
} Ajax_schedules yalnızca daha önce görüntülenen _get_schedules çağırır ve sonuçları JSON olarak bir yanıt gönderen ve daha sonra başka bir çıktı gönderilmeyecek şekilde komut dosyasından çıkan _ajax_return işlevine devam eder. Cron’un programında ön uçtan herhangi bir değişikliğe izin vermiyoruz, bu yüzden olsun ya da posta olsun, sadece GET gibi davranacağız. Ayrıca belirli CRON programları için istekleri de ele almıyoruz. Ajax_events işlevi, yayınlanan CRON olay verilerini kontrol eder ve CRON programını etkinlikteki değişiklikleri yansıtacak şekilde günceller ve ardından Cron’a vadesi gelen her olayı işlemesini söyler. Bu oldukça karmaşıktır, çünkü mevcut Cron koşu kolu olayına tekrarlananlarla zarar vermemeye dikkat eder ve bunun tersi de geçerlidir. Şu anda, CRON programı verilerinin bir parçası olarak sağlandığından, ön uçtan CRON olay verileri istemek için bir nedenimiz yok, bu yüzden temel olarak yalnızca sonrası istekleri ele alıyoruz, yalnızca istek denenirse başarısız olacaktır. Bu işlev oldukça çiğ ve üretime hazır değil. Belki gelecekte sertleştireceğiz.
Ajax_events’in yanı sıra class-cron-pixie.php için CRON test programını ve etkinliğini tam kaynakta düzenleyen diğer bazı işlevleri görebilirsiniz: https://github.com/ianmjones/wp-croni-pixie/blob/backbonejs /Src/src/srcudes /class-chron-pixie.php önde yukarıda önerildiği gibi yaparsanız, ön uç için JavaScript dosyasına nelerin dahil edileceği hakkında iyi bir fikriniz olabilir.Program verilerimizin veya etkinliklerimizin ne olduğunu, programları ve etkinlikleri barındıracak bazı koleksiyonlar ve her birinin programlarının, etkinliklerinin ve listelerinin (koleksiyonlarından) nasıl görüntüleneceğini belirlemek için bazı gizli görünümleri belirlemek için bazı modeller.
Yukarıdaki koda Main.js’ten bakarsanız, ortaya çıkabilecek ilk şey, etkinlikleri, etkinlikleri tanımlamak için doğrudan omurgalı.model veya omurgaya.Collection kullanmamamızdır. Bunun nedeni Varsayılan olarak Backbone.js, bir arka uç sunucuyla Chit-Chat için dinlenme ateşini kullanmayı bekliyor, ancak şu anda açıkça dinlenmeye dayanmayan admin-ajax.php wordpress kullanıyoruz. Bu nedenle, dosyanın en üstünde, WordPress tarafından sağlanan Global Ajaxurl değişkeninde tanımlandığı gibi, admin-aajax.php’ye normalden normal olan omurganın nasıl değiştirileceğini bilen İdari Dönüşüm İşlevinin yönetimini tanımlarız. Genellikle admin-ajax.php kullandığınızda, Ajax isteklerinde gönderilen verilerde dize eylemi sağlayarak WordPress’te hangi kancayı etkinleştirmek istediğinizi söylersiniz. Bu nedenle, küçük geçersiz kılma nesnemiz, ondan uzanan bir model veya koleksiyon üzerinde ayarlanan eylem alımını işler veya nesne kendi varsayılan eylemini kullanır (bu durumda “CRON_PIXIE_REQUEST” olarak ayarlanır, bu da her yere liderlik etmez). Uygulamalar tanımlandıktan sonra, Basemodel ve basecollection karışım işlevinde hazırlanır ve gerçek omurgadan uzatılır. Sonra Cron olaylarının modelinin tanımına ve koleksiyonuna geldik: /*** Single Cron etkinliği. */ Cronpixie.eventmodel = Basemodel.extend ({action: ‘cron_pixie_evens’, varsayılan: {program: null, aralık: null, kanca: null, args: null, zaman damgası: null, secons_due: null});
/*** Cron olaylarının koleksiyonu. */ Cronpixie.evencollection = basecollection.extend ({action: ‘cron_pixie_evens’, model: cronpixie.eventmodel}); Burada, model veya toplama verileri sunucu ile her senkronize edildiğinde aramak istediğimiz WordPress eylemlerini nerede tanımladığımızı görüyorsunuz. EventModel ayrıca verilerde görülmeyi beklediğimiz bir alan koleksiyonu içerir ve bu da sıfıra başlatılır. EventsCollection sadece bir olay koleksiyonu olduğunu öngörür. Main.js kodunu gördüğünüzde Schedulemodel ve Schedulescollection sınıfının çok benzer tanımlandığını göreceksiniz. Daha sonra Web sayfamızda EventModel/Collection ve Schedulemodel/Collection verilerini görüntüleyecek bir ekran görünür. /*** CRON programlarını listelemek için ana görünüm. */ Cronpixie.schedulesListView = ockbone.view.extend ({el: ‘#cron-pixie-main’, başlatma: function () {this.listento (this.collection, ‘senkronize’, this.render) ;: function (işlev ( ) {var $ list = this. $ (‘ul.cron-pixie-schedules’) .Empty (); this.collection.each.each (function) {var item = new cronpixie.schedulesListititItemView ({model: model: model: }); $ list.apend (item.render (). $ el);}, this); bunu döndür;}});
SchedulesListView, HTML’de gördüğümüz #cron-pixie-main div’e eklenen ana ekrandır, eklenti widget’ının içeriği olarak çıktı. SchedulesListView, veri toplama her senkronize edildiğinde içeriği oluşturmasını söylemek için kullanılan bir başlatma işlevine sahiptir. Bizim durumumuzda, Schedulescollection’a her söylediğimizde, ekranı sunucudan veri almak için ayarladığımızı. Bu ekran, veriler güncellendikten sonra oluşturma işlevini gerçekleştirecektir. Oluşturma işlevinde, önce ekranın kökü olan “Cron-Pixie-Main” div’deki “Cron-Pixie-Schedules” sınıfı ile listesiz listeden var olan programların listesini siliyoruz. Daha sonra koleksiyondaki her program için, verilerle SchedulesListitItemView’u açtı ve kendisini oluşturmasını ve daha sonra çıktıyı sıralanmayan listeye eklemesini emretti. /*** Tek bir Cron programının görüşü. */ Cronpixie.schedulesListitItemView = ockbone.view.extend ({tagName: ‘li’, className: ‘cron-pixie-schedule’, şablon: _.template (‘#cron-pixie-schedule-otem-tmpl’) .html ()), başlatın: function () {this.listento (this.model, ‘değiştir’, this.render); this.listento (this.model, ‘yok’, this.remove);}, render: function () {var html = this.template (this.model.tojson ()); this. $ el.html (html); // cron programının olaylarını oluşturması gerekiyor. var $ list = this. $ (‘ul .Cron-pixie-Elevents ‘) .Empty (); var Events = new Cronpixie.evenCollection (this.model.get (‘ etkinlikler ‘)); etkinlikler.each (function (model) {var item = yeni cronpixie.eventsListItemView ( {Model: Model});
$ list.Append (item.render (). $ el); }, Bu); Bunu iade edin; }}); SchedulesListitItemView her kullanıldığında, “Cron-Pixie-Schedule” sınıfı ile kendi LI öğesini ayarladı. TagName: Li ve ClassName: ‘Cron-Pixie-Schedule’ özelliği budur. Daha önce tartışıldığı gibi, widget’ın ilk içeriğinin çıktısı hakkında konuşurken, SchedulesListITIMView Undercore.js şablonunun işlevselliğini kullanarak DOM “#cron-pixie-schedule-item-tmpl” öğesini çıktısı için bir şablon olarak işlemek için. Oluşturma işlevi geçerli model verilerini şablona uygular ve ardından görüntüleme içeriğini HTML çıkışına ayarlar. Şablon işlevi, sıradan bir eski JavaScript nesnesi yerine JSON tarafından teşvik edilen verilerle çalışır, bu nedenle bu.model.tojson () ‘nın kullanılması. Çizelge öğesini görüntüleyin, tüm program türevi CRON olaylarını görüntüleme ihtiyacı ile biraz karmaşıktır. Ancak, aynı modelin, bir program modelinde bir program koleksiyonunu yukarıdaki ana SchedulesListView ekranına dönüştürmek için kullanılan bir Cron olayları koleksiyonunu oluşturmak için kullanıldığını göreceksiniz. Bu sadece her etkinlik için OpentListITIMView görünümünün ortaya çıkmasını sağlar. Tartışmak için sadece bir görünüm daha bırakır: /*** Tek bir Cron etkinliğinin görüşü. */ Cronpixie.eventsListInview = ockbone.view.extend ({tagname: ‘li’, className: ‘cron-pixie-event’, şablon: _.template ($ (‘#cron-pixie-event-item-tmpl’) .html ()), başlatın: function () {this.listento (this.model, ‘değiştir’, this.render); this.listento (this.model, ‘yok’, this.remove);}, olaylar: {‘Tıklayın .cron-pixie-Eevent-Run:’ Runnow ‘
}, rendering: function () {var html = this.template (this.model.tojson ()); Bu. $ El.html (html); Bunu iade edin; }, Runnow: function () {cronpixie.pausetimer (); // Yalnızca bir sonraki yenilemeden önce değilse güncellemeyi çalıştırmaya zahmet edin. var saniye_due = this.model.get (‘saniye_due’); if (Seconds_due> cronpixie.timer_period) {var zaman damgası = this.model.get (‘zaman damgası’) – saniye_due; this.model.save ({Timestamp: Timestamp, Seconds_Due: 0}, {başarı: işlev (model, yanıt, seçenekler) { / * console.log (optionlar); console.log (yanıt); * / cronpixie.runtimer ( );}, hata: işlev (model, yanıt, opsiyon) { / * console.log (seçenekler); console.log (yanıt); * / cronpixie.runtimer ();}} }}}); OpentsListItemView sınıfında aşağıdaki biti elde edene kadar yeni bir şey yoktur: Olaylar: {‘Tık. Eklenti “bölümü? Bu olay özelliği, duyulacak olayları ve yanıt olarak hangi işlevlerin etkinleştirileceğini belirlemek için gereken tek şeydir. Bu durumda, hedef DOM öğesinde “Cron-Pixie-EVENT-RUN” sınıfına sahip olduğunda, “Şimdi Çalışma” simgesini yaparken tıklama olaylarını ararız. Ekranın geri kazanma yardımcı programının aşağıdaki işlevini tartışmayacağım, bu omurgaya özel bir şey değil ve yalnızca “saniye olgunluğa” değerini insanlar tarafından okunması daha kolay olan dizelere değiştirir. Yani, DisplayIntVal (12345); “3J 25m 45s” üretecek
. Ayrıca RefreshData, Runtimer, Pausetimer ve Togglelkeletimer işlevlerinin oldukça açık olduğunu umuyorum: /*** sunucudan yeni veriler alır. */ Cronpixie.RefreshData = function () {cronpixie.schedules.fetch (); }; /*** Henüz çalışmıyorsa tekrarlayan ekran güncellemelerini başlatın. */ Cronpixie.runtimer = function () {if (unefined == cronpixie.timer) {cronpixie.timer = set Serval (cronpixie.refreshdata, cronpixie.imer_period * 1000); }}; /*** Çalışıyorsa tekrar eden ekran güncellemelerini durdurun. */ Cronpixie Cronpixie.Timer’ı sil; }}; /*** Tekrarlayan ekran güncellemelerini açar veya kapatın. */ Cronpixie.toggleletImer = function () {if (infelined! == cronpixie.timer) {cronpixie.pausetimer (); } else {cronpixie.runtimer (); }}; Dikkat edilmesi gereken bir şey, yenileme ne kadar basit olduğudur. Program.fetch () ‘yi yapmak, Çizelge Değişkeninde belirtilen CRON programları koleksiyonu için sunucudan tüm verileri almak için gereken tek şeydir. “Ama programlar değişkeni nereden geldi?”, Sorduğunu duydum? Sağlıklı … /*** İlk verileri görünüme ayarlayın ve tekrarlayan ekran güncellemelerini başlatın. */ Cronpixie.init = function () {// Temel verileri ve görünümü başlatın. Cronpixie.schedules = yeni cronpixie.schedulescollection (); Cronpixie.schedules.reset (cronpixie.data.schedules); Cronpixie.scheduleslist = new cronpixie.schedulesListView ({collection: cronpixie.schedules}); Cronpixie.scheduleslist.render (); // Verileri güncellemek için bir zamanlayıcı başlatın. Cronpixie.runtimer (); }; $ (belge) .ready (function () {cronpixie.init ();});
DOM tamamen şarj edildiğinde, eklenti tarafından ayarlanan cronpixie.data.schedules değişkeninde sağlanan verileri oluşturmak için Init işlevi çağrılır.İlk satır, programları yeni bir Schedulescollection olarak değiştirir.Daha sonra sıfırlama işlevi, herhangi bir senkronizasyon olayını etkinleştirmeden verileri ayarlamak için çağrıldı, çünkü kimse gerçekten değişmediğinde sunucuya veri göndermek için herhangi bir çaba istemiyoruz.Daha sonra bir SchedulesListView ekran örneği oluşturduk, koleksiyonu yeni hazırladığımız programların bir koleksiyonuna ayarladık.Daha sonra size ilk kez kendini işlemek için yeni bir görünüm anlatıyoruz, bundan sonra koleksiyon her değiştiğinde kendiniz için hazırlanacak.Program koleksiyonunu her 5 saniyede bir güncellemek için RuntiMer () adını veriyoruz;
Zaman regülatörünü başlatmak için, daha önce gördüğünüz gibi, nihayet her etkinleştirildiğinde schedules.fetch () çağırın. Voila, şimdi sunucudan gelen ve görüşlerimize göre dalgalanmalarımızı güncelleyen sürekli bir güncellememiz var. Sarma oldukça uzun bir makaledir, ancak başlangıçtan itibaren, umarım takip edilmesi kolay kodda yazılmış yeni bir eklenti sunar. Ayrıca reaktif stil geliştirme kavramına da dokunuyoruz ve WordPress stok kurulumunda var olan teknoloji ile nasıl kullanılabileceğini gösteriyoruz. “Bina Reaktif WordPress eklentisi” dizisindeki bir sonraki makale için, farklı bir şey için omurgalı.js uygulamasını değiştireceğiz. Mümkün olduğunca çok arka uç tartışmayacağız, umarım daha kısa makaleleriniz vardır! Bu makaleyi beğeniyor musunuz? Yeni bir şey mi öğreniyorsunuz ve JQuery’nin Dom tarzı manipülasyonuna güvenmek yerine bir sonraki WordPress eklentinizde omurgalı.js kullanmayı denemek istiyor musunuz? Lütfen bana aşağıdaki yorumlarda söyleyin. Bu, reaktif WordPress eklentileri oluşturmak için “Bina Reaktif WordPress Eklentisi Serisi” nde 3 Madde 1/3. Bölüm 1 – Backbone.js
Reaktif WordPress Eklentileri Bina – Bölüm 2 – Vue.js
Reaktif WordPress eklentisi oluşturma – Bölüm 3 – Elm
