Menggunakan Backbone Dalam Admin WordPress: Front End

Indonesian (Bahasa Indonesia) translation by Muhamad Zulfiqor (you can also view the original English article)

Selamat datang di bagian kedua Menggunakan Backbone Dalam Admin WordPress. Pada bagian pertama, kami mengatur 'back-end' dari plugin kami dan sekarang di bagian kedua kami akan menyelesaikan dengan menambahkan fungsionalitas 'sisi klien' atau 'ujung depan' kami. Untuk ikhtisar tentang apa yang kami bangun dalam tutorial ini bersama dengan struktur dan file folder kami, silakan tinjau bagian pertama.

1. Buat File Template

Dalam folder src, buat yang lain disebut Template dan file di dalam yang disebut metabox.templ.php. Ini adalah tempat kami akan menempatkan HTML yang diperlukan untuk kotak meta kami. Hal ini juga kesempatan besar untuk output data JSON yang diperlukan untuk jawaban kami.

Folder dan file sekarang harus terlihat seperti ini.

Buat Template untuk Satu Jawaban

Mari kita melihat pada apa yang kita ciptakan. Anda dapat memikirkan jawaban setiap sebagai Model data dan karena kita akan menggunakan sisi klien template untuk menghasilkan pandangan untuk masing-masing, pandangan itu dapat bereaksi terhadap perubahan dalam model. Ini memungkinkan kita untuk menjadi sangat spesifik ketika mengikat peristiwa UI dan secara alami memimpin ke alur kerja mudah - setelah Anda mendapatkan kepala Anda di sekitarnya, yaitu.

Di dalam metabox.templ.php kami baru dibuat, ini adalah template yang kita akan menggunakan untuk masing-masing dari kita model. Anda dapat melihat bahwa kita pada dasarnya adalah membungkus beberapa HTML dalam script tag. Kami memberikan script tag atribut type = "text/template" sehingga browser tidak membuat itu ke halaman. Ini sepotong kecil HTML adalah untuk digunakan kemudian untuk menghasilkan markup diperlukan untuk melihat masing-masing. Kita akan menggunakan Underscore's built-in template kemampuan sehingga nilai dibungkus seperti ini akan digantikan oleh data dalam model kita nanti.

<!-- src/templates/metabox.templ.php  -->

<!-- Template -->
<script type="text/template" id="inputTemplate">
  <label for="<%= answer_id %>"><%= index %>:</label>
	<input id="<%= answer_id %>" class="answers" size="30" type="text" name="<%= answer_id %>" value="<%= answer %>" placeholder="Answer for Question <%= index %> Here">
	<button disabled="true">Save</button>
</script>
<!-- End template -->

Dasar HTML

Masih dalam src/templates/metabox.templ.php - di sini kita adalah hanya meletakkan wadah yang akan diisi dengan masukan dari template di atas. Hal ini terjadi setelah tulang punggung telah diurai data JSON yang diperlukan untuk model, jadi untuk sekarang ini adalah semua yang perlu kita lakukan di sini.

<!-- src/templates/metabox.templ.php  -->
<p>Enter the Answers below</p>
<div id="answerInputs"></div>
<div id="answerSelect">
	<span>Correct Answer:</span>
</div>
<p>
	<input name="save" type="submit" class="button button-primary button-small" value="Save all">
</p>

Output JSON

Hal terakhir yang diperlukan di dalam src/templates/metabox.templ.php file, adalah data JSON yang mewakili setiap jawaban. Di sini kami menciptakan sebuah objek Global Namespace dan kemudian menetapkan nilai-nilai yang kami kirimkan melalui dengan $viewData array. Saya juga ingin menyimpan referensi ke wadah kami akan menggunakan nanti sehingga saya tidak memiliki ID di dua file terpisah.

<!-- src/templates/metabox.templ.php  -->
<script>
	window.wpQuiz = {};
	var wpq = window.wpQuiz;
	wpq.answers = <?= $answers ?>;
	wpq.answers.correct = <?= $correct ?>;
	wpq.answerSelect = '#answerSelect';
	wpq.answerInput = '#answerInputs';
	wpq.inputTempl = '#inputTemplate';
	wpq.post_id = <?= $post->ID ?>;
</script>

2 JavaScript.

OK, jika Anda mendapatkan sejauh ini, Anda harus berhasil set-up plugin Anda mengizinkan penggunaan Backbone.js dan kotak meta Keluaran mark-up diperlukan dan JSON data. Sekarang saatnya untuk membawa itu semua bersama-sama dan menggunakan Backbone.js untuk mengatur kode sisi klien kami. Saatnya untuk menutup:

Menciptakan koleksi model dari JSON data
Menggunakan sisi klien template untuk membangun pandangan untuk masing-masing
Menonton untuk klik, kunci dan blur peristiwa dalam pandangan setiap
Menyimpan model kembali ke database

Membuat File admin.js dan tempat itu ke js Folder

File dan struktur direktori akhir Anda akan terlihat seperti ini.

Pertama-tama kita akan membungkus segala sesuatu yang kita lakukan dalam fungsi segera disebut dan lulus dalam jQuery untuk digunakan dengan tanda $, aku tidak akan menunjukkan pembungkus ini dalam cuplikan lebih apapun, jadi pastikan Anda meletakkan segala sesuatu di bawah di dalamnya.

/* js/admin.js */

(function($) {

	/** Our code here **/

}(jQuery));

Selanjutnya kita perlu untuk mengakses data kami yang disimpan pada global namespace dan juga membuat objek baru yang akan menyimpan benda-benda tulang punggung kami.

1	/* js/admin.js */
2
3	var Quiz = { Views:{} };
4	var wpq = window.wpQuiz;

Model

Model mewakili jawaban tunggal. Dalam konstruktor yang kami melakukan beberapa hal.

Menetapkan nilai default untuk memperbaiki palsu
Menetapkan URL tulang punggung yang membutuhkan untuk menyimpan model kembali ke database. Kita dapat mengakses URL yang benar berkat membuktikan variabel ajaxurl yang tersedia pada setiap halaman admin WordPress. Kami juga menambahkan nama metode kami yang menangani permintaan ajax
Selanjutnya kita akan menimpa toJSON metode untuk menambahkan posting saat ini ID ke setiap model. Ini bisa telah melakukan sisi server, tapi saya sudah taruh di sini sebagai contoh bagaimana Anda dapat mengganti apa yang disimpan ke server (ini bisa datang sangat berguna itulah sebabnya saya telah menyertakan di sini)
Akhirnya di metode inisialisasi, kita akan memeriksa jika model saat ini adalah jawaban yang benar dengan membandingkan dengan ID untuk ID dari jawaban yang benar. Kami melakukan hal ini sehingga kemudian kita tahu jawaban yang harus dipilih secara default

/* js/admin.js */

	Quiz.Model = Backbone.Model.extend({
		defaults : {
			'correct' : false
		},
		url : ajaxurl+'?action=save_answer',
		toJSON : function() {
			var attrs = _.clone( this.attributes );
			attrs.post_id = wpq.post_id;
			return attrs;
		},
		initialize : function() {
			if ( this.get( 'answer_id' ) === wpq.answers.correct ) {
				this.set( 'correct', true );
			}
		}
	});

Koleksi

Koleksi pada dasarnya hanya sebuah bungkus untuk sekelompok model dan itu membuat bekerja dengan model-model angin. Contoh kecil ini, kami tidak akan mengubah koleksi, Selain menetapkan yang model itu harus menggunakan.

/* js/admin.js */

	Quiz.Collection = Backbone.Collection.extend({
		model: Quiz.Model
	});

Wrapper input

Pandangan pertama kami dapat dianggap sebuah bungkus untuk setiap Field input. Kita tidak perlu untuk menyatakan template atau elemen HTML yang kita ingin tulang punggung untuk menciptakan bagi kita dalam hal ini, karena kemudian ketika kita instantiate pandangan ini, kita akan melewati ID dari div bahwa kita diciptakan dalam file kotak meta. Tulang punggung kemudian akan hanya menggunakan elemen sebagai wadah. Pandangan ini akan membawa koleksi dan untuk setiap model dalam koleksi itu, itu akan menciptakan sebuah elemen input yang baru dan menambahkan itu untuk dirinya sendiri.

/* js/admin.js */

	Quiz.Views.Inputs = Backbone.View.extend({
		initialize:function () {
			this.collection.each( this.addInput, this );
		},
		addInput : function( model, index ) {
			var input = new Quiz.Views.Input({ model:model });
			this.$el.append( input.render().el );
		}
	});

Masukan tunggal

Pandangan ini berikutnya mewakili model tunggal. Kepentingan pamer jenis-jenis hal-hal yang dapat Anda lakukan ketika coding JavaScript dengan cara ini, saya sudah mencoba untuk memberikan beberapa teknik interaksi yang berbeda dan menunjukkan bagaimana untuk bereaksi terhadap orang-orang dengan tulang punggung.

Perhatikan bahwa kita akan menentukan 'tagName' di sini bersama dengan template. Dalam kasus kami, ini akan ambil template itu kita melihat mengurai sebelumnya, menggunakan data dari model, dan kemudian membungkus semuanya dalam tag p (yang akan memberi kita sedikit bagus margin di sekitar masing-masing).

Juga perhatikan bagaimana peristiwa yang terikat kepada unsur-unsur dalam pandangan. Jauh lebih bersih daripada rata-rata Anda panggil jQuery dan apa yang lebih baik adalah kemampuan untuk menggunakan jQuery pemilih seperti ini this.$('input') dalam pandangan kami mengetahui bahwa mereka secara otomatis scoped jarak. Ini berarti jQuery tidak melihat seluruh DOM ketika mencoba untuk mencocokkan pemilih.

Dalam pandangan ini, kita akan mampu:

Tahu kapan sebuah field input telah berubah
Perbarui model yang terkait dengannya secara otomatis (yang akan digunakan untuk memperbarui bidang pilih secara otomatis di bawahnya)
Aktifkan tombol simpan di sisi input yang diubah
Lakukan penyimpanan kembali ke database

/* js/admin.js */

	Quiz.Views.Input = Backbone.View.extend({
		tagName: 'p',
		// Get the template from the DOM
		template :_.template( $(wpq.inputTempl).html() ),

		// When a model is saved, return the button to the disabled state
		initialize:function () {
			var _this = this;
			this.model.on( 'sync', function() {
				_this.$('button').text( 'Save' ).attr( 'disabled', true );
			});
		},

		// Attach events
		events : {
			'keyup input' : 'blur',
			'blur input' : 'blur',
			'click button' : 'save'
		},

		// Perform the Save
		save : function( e ) {
			e.preventDefault();
			$(e.target).text( 'wait' );
			this.model.save();
		},

		// Update the model attributes with data from the input field
		blur : function() {
			var input = this.$('input').val();
			if ( input !== this.model.get( 'answer' ) ) {
				this.model.set('answer', input);
				this.$('button').attr( 'disabled', false );
			}
		},

		// Render the single input - include an index.
		render:function () {
			this.model.set( 'index', this.model.collection.indexOf( this.model ) + 1 );
			this.$el.html( this.template( this.model.toJSON() ) );
			return this;
		}
	});

Elemen Pilih

Elemen pilih ini adalah tempat pengguna dapat memilih jawaban yang benar. Ketika pandangan ini di instantiated, ia akan menerima koleksi model yang sama yang dilakukan oleh pembungkus input. Ini akan berguna nantinya karena kita akan dapat mendengarkan perubahan pada model di bidang input dan secara otomatis memperbarui nilai yang sesuai dalam elemen pilih ini.

/* js/admin.js */

	Quiz.Views.Select = Backbone.View.extend({
		initialize:function () {
			this.collection.each( this.addOption, this );
		},
		addOption:function ( model ) {
			var option = new Quiz.Views.Option({ model:model });
			this.$el.append( option.render().el );
		}
	});

A Single Option Lihat

Tampilan akhir kami akan membuat elemen opsi untuk setiap model dan akan ditambahkan ke elemen pilih di atas. Kali ini saya telah menunjukkan bagaimana Anda dapat secara dinamis mengatur atribut pada elemen dengan mengembalikan hash dari fungsi panggilan balik yang ditetapkan ke properti atribut. Juga perhatikan bahwa dalam metode inisialisasi () kita memiliki 'berlangganan' untuk mengubah acara pada model (khususnya, atribut jawaban). Ini pada dasarnya hanya berarti: setiap saat atribut jawaban model ini diubah, panggil metode render () (yang dalam hal ini, hanya akan memperbarui teks). Konsep 'berlangganan' atau 'mendengarkan' peristiwa yang terjadi dalam model benar-benar apa yang membuat Backbone.js dan banyak perpustakaan lain menyukainya begitu kuat, berguna dan menyenangkan untuk diajak bekerja sama.

/* js/admin.js */

	Quiz.Views.Option = Backbone.View.extend({
		tagName:'option',

		// returning a hash allows us to set attributes dynamically
		attributes:function () {
			return {
				'value':this.model.get( 'answer_id' ),
				'selected':this.model.get( 'correct' )
			}
		},

		// Watch for changes to each model (that happen in the input fields and re-render when there is a change
		initialize:function () {
			this.model.on( 'change:answer', this.render, this );
		},
		render:function () {
			this.$el.text( this.model.get( 'answer' ) );
			return this;
		}
	});

Instantiate Koleksi dan Tampilan

Kami sangat dekat sekarang, yang harus kami lakukan adalah memberi instantiate koleksi baru dan memberikannya JSON yang diperlukannya, kemudian instantiate kedua tampilan 'pembungkus' untuk elemen pilih dan untuk input. Perhatikan bahwa kami juga memberikan properti el ke pandangan kami. Ini adalah referensi ke div dan pilih elemen yang kita kosongkan sebelumnya di kotak meta.

/* js/admin.js */

	var answers = new Quiz.Collection( wpq.answers );
	var selectElem = new Quiz.Views.Select({ collection:answers, el :wpq.answerSelect });
	var inputs = new Quiz.Views.Inputs({ collection:answers, el:wpq.answerInput });

3. Aktifkan Plugin

Jika Anda telah membuat sampai akhir, Anda sekarang harus bekerja sepenuhnya contoh tentang bagaimana untuk menggabungkan Backbone JS ke WordPress plugin. Jika Anda pergi ke depan dan melihat file sumber, Anda akan melihat bahwa jumlah sebenarnya kode yang diperlukan untuk memasukkan tulang punggung relatif kecil. Banyak kode kami pergi di sini adalah PHP yang diperlukan untuk plugin. Bekerja dengan tulang punggung setiap hari selama 6 minggu terakhir telah benar-benar memberi saya baru ditemukan menghormati organisasi kode ujung depan dan saya berharap bahwa Anda dapat menghargai manfaat yang pasti akan datang dari bekerja dengan cara ini.

Dalam masyarakat WordPress saya bisa membayangkan beberapa plugin yang lebih kompleks dan berkualitas tinggi di luar sana benar-benar menguntungkan dari menggunakan tulang punggung dan saya merasa terhormat untuk bisa berbagi dengan Anda sebuah teknik untuk melakukan hal itu.