Bermula dengan Backbone.js

Tidak seperti rakan pembangunan webnya, JavaScript tidak pernah benar-benar menyediakan struktur dalam bentuk rangka kerja. Syukurlah, dalam beberapa tahun kebelakangan ini, ini telah mula berubah.

Hari ini saya ingin memperkenalkan anda kepada Backbone.JS, perpustakaan kecil yang comel yang menjadikan proses mencipta aplikasi yang kompleks, interaktif dan dipacu data lebih mudah. Ia menyediakan cara yang bersih untuk memisahkan data daripada pembentangan.

Backbone.JS Gambaran Keseluruhan

Dicipta oleh Jeremy Ashkenas, ninja JS yang membina CoffeeScript, Backbone ialah perpustakaan ultra ringan yang membolehkan anda mencipta bahagian hadapan yang mudah diselenggara. Ia agnostik bahagian belakang dan berfungsi dengan baik dengan mana-mana pustaka JavaScript moden yang telah anda gunakan.

Backbone ialah koleksi objek kohesif dengan berat di bawah 4kb yang menyediakan struktur kepada kod anda dan pada asasnya membantu anda membina aplikasi MVC yang betul dalam penyemak imbas. Laman web rasmi menerangkan tujuannya seperti ini:

Backbone menyediakan struktur untuk aplikasi intensif JavaScript dengan menyediakan model dengan pengikatan nilai kunci dan acara tersuai, koleksi dengan API fungsi yang boleh dikira yang kaya, paparan dengan pengendalian acara deklaratif dan menghubungkan semuanya antara muka JSON yang RESTful ke aplikasi sedia ada anda.

Mari kita hadapi: perkara di atas agak sukar untuk dihuraikan dan difahami. Jadi mari kita teruskan menyahbina jargon dengan bantuan Jeremy.

Ikatan nilai utama dan acara tersuai

Apabila kandungan atau keadaan model berubah, objek lain yang melanggan model akan dimaklumkan supaya mereka boleh mengendalikannya dengan sewajarnya. Di sini, paparan mendengar perubahan dalam model dan mengemas kini sendiri dengan sewajarnya, dan bukannya model perlu berurusan dengan paparan secara manual.

API fungsi terbilang yang kaya

Backbone dilengkapi dengan banyak fungsi yang sangat berguna untuk memproses dan berfungsi dengan data anda. Tidak seperti pelaksanaan lain, tatasusunan dalam JavaScript agak neutral, yang benar-benar boleh menjadi penghalang apabila anda perlu berurusan dengan data.

Pandangan dengan pengendalian acara deklaratif

Hari-hari anda menulis panggilan pengikat spageti telah berakhir. Anda boleh mengisytiharkan panggilan balik secara pemrograman yang perlu dikaitkan dengan elemen tertentu.

Antara muka JSON yang tenang

Walaupun kaedah lalai apabila anda ingin berkomunikasi dengan pelayan adalah menggunakan panggilan AJAX standard, anda boleh menukar ini dengan mudah kepada apa sahaja yang anda perlukan. Banyak penyesuai telah muncul, meliputi kebanyakan penyesuai yang paling popular, termasuk Soket Web dan storan tempatan.

Pecahkan kepada istilah yang lebih mudah:

Backbone menyediakan cara yang bersih untuk memisahkan data daripada pembentangan. Model yang mengendalikan data hanya berkenaan dengan penyegerakan dengan pelayan, manakala tanggungjawab utama paparan adalah untuk mendengar perubahan pada model yang dilanggan dan memaparkan HTML.

Soalan Lazim Pantas

Saya rasa anda mungkin keliru sedikit sekarang, jadi mari jelaskan beberapa perkara:

Adakah ia akan menggantikan jQuery?

Tidak. Skop mereka sangat saling melengkapi, dengan sedikit pertindihan dalam fungsi. Backbone mengendalikan semua abstraksi tahap yang lebih tinggi, manakala jQuery (atau perpustakaan yang serupa) mengendalikan DOM, peristiwa yang dinormalkan, dsb.

Skop dan kes penggunaannya sangat berbeza, dan hanya kerana anda tahu satu itu tidak bermakna anda tidak sepatutnya mempelajari yang lain. Sebagai pembangun JavaScript, anda harus tahu cara menggunakan kedua-duanya dengan berkesan.

Kenapa saya perlu menggunakan ini?

Oleh kerana selalunya, kod bahagian hadapan menjadi kucar-kacir yang mengukus dan kotor bagi panggilan balik bersarang, manipulasi DOM, HTML untuk pembentangan dan gelagat lain yang tidak dapat digambarkan.

Backbone menyediakan cara yang sangat bersih dan elegan untuk menguruskan huru-hara ini.

Di manakah saya harus menggunakannya?

Backbone bagus untuk mencipta aplikasi berat bahagian hadapan, dipacu data. Fikirkan antara muka GMail, Twitter baharu atau apa-apa pendedahan lain dalam beberapa tahun yang lalu. Ia menjadikan penciptaan aplikasi yang kompleks lebih mudah.

Walaupun anda boleh memasukkannya ke dalam halaman web yang lebih arus perdana, ini sebenarnya perpustakaan yang dibuat khusus untuk aplikasi web.

Tulang belakang sangat ringan, kurang daripada 4kb.

Saya masih boleh menggunakan perpustakaan lain di halaman, bukan?

Sama sekali. Bukan sahaja akses DOM biasa, jenis pembalut AJAX, tetapi juga jenis pemuatan templat dan skrip yang lain. Ia sangat, sangat longgar, yang bermaksud anda boleh menggunakan hampir semua alat dengan Backbone.

Adakah ia akan membawa keamanan dunia?

Tidak, maaf. Tetapi inilah sesuatu untuk menggembirakan anda.

Baiklah, mari letakkan soalan ini sekarang dan mari mulakan!

Ketahui tentang Tulang Belakang Tulang Belakang

MVC dalam Backbone pada asalnya bermaksud Model, Paparan dan Koleksi kerana tiada pengawal dalam rangka kerja. Keadaan telah berubah.

Teras Tulang Belakang terdiri daripada empat kelas utama:

• Model
• Koleksi
• Lihat
• Pengawal

Memandangkan masa kami agak sempit, kami hanya akan melihat kursus teras hari ini. Kami akan membuat susulan dengan aplikasi yang sangat mudah untuk menunjukkan konsep yang diajar di sini, kerana meletakkan semuanya dalam satu artikel dan mengharapkan pembaca untuk menghuraikan semuanya adalah terlalu banyak.

Sila kekal berjaga-jaga dalam minggu-minggu akan datang!

Model

Model mungkin mempunyai makna yang berbeza dalam pelaksanaan MVC yang berbeza. Dalam Backbone, model mewakili satu entiti—rekod dalam pangkalan data, jika anda mahu. Tetapi tidak ada peraturan yang keras dan pantas di sini. Dari laman web Backbone:

Model adalah teras bagi mana-mana aplikasi JavaScript, yang mengandungi data interaktif dan kebanyakan logik yang mengelilinginya: transformasi, pengesahan, sifat dikira dan kawalan akses.

Model ini hanya memberi anda cara untuk membaca dan menulis sifat atau sifat arbitrari pada set data. Dengan mengambil kira perkara ini, satu baris kod berikut boleh digunakan sepenuhnya:

var Game = Backbone.Model.extend({});

Mari kita membina ini.

var Game = Backbone.Model.extend({
        initialize: function(){
            alert("Oh hey! ");
        },
		  defaults: {
            name: 'Default title',
            releaseDate: 2011,
        }
    });

initialize akan dicetuskan apabila objek dibuat seketika. Di sini saya hanya menarik perhatian kepada beberapa tingkah laku bodoh - anda mungkin perlu bootstrap data atau melakukan pengemasan lain dalam aplikasi anda. Saya juga menentukan sekumpulan nilai lalai sekiranya tiada data dihantar.

Jom lihat cara membaca dan menulis sifat. Tetapi pertama, mari kita buat contoh baharu.

// Create a new game
var portal = new Game({ name: "Portal 2", releaseDate: 2011});

// release will hold the releaseDate value -- 2011 here
var release = portal.get('releaseDate');

// Changes the name attribute
portal.set({ name: "Portal 2 by Valve"});

Jika anda perasan mendapat/menetapkan mutator, makan biskut! Atribut model tidak boleh dibaca melalui format object.attribute biasa. Anda mesti melaksanakan getter/setter kerana peluang untuk menukar data secara tidak sengaja adalah rendah.

Pada ketika ini, semua perubahan kekal dalam ingatan sahaja. Mari buat perubahan ini kekal dengan bercakap dengan pelayan.

portal.save();

Itu sahaja. Adakah anda mengharapkan lebih? Baris kod di atas kini akan menghantar permintaan kepada pelayan anda. Perlu diingat bahawa jenis permintaan berubah secara bijak. Oleh kerana ini adalah objek baharu, POST akan digunakan. Jika tidak, gunakan PUT.

Model Backbone hadir dengan lebih banyak ciri secara lalai, tetapi ini pastinya akan membantu anda bermula. Klik pada dokumentasi untuk maklumat lanjut.

Koleksi

Koleksi dalam Tulang Belakang pada asasnya hanyalah koleksi model. Seperti analogi pangkalan data sebelumnya, koleksi adalah hasil pertanyaan, di mana hasilnya terdiri daripada banyak rekod [model]. Anda boleh menentukan koleksi seperti ini:

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  }
});

Perkara pertama yang perlu diperhatikan ialah kami menentukan koleksi model yang mana ini. Memperluaskan contoh kami sebelum ini, saya menjadikan koleksi ini sebagai koleksi permainan.

Kini anda boleh terus menggunakan data anda mengikut kehendak anda. Sebagai contoh, mari kita lanjutkan koleksi ini untuk menambah kaedah yang hanya mengembalikan permainan tertentu.

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  old : function() {
    return this.filter(function(game) { 
      return game.get('releaseDate') < 2009; 
    });
  }
  }
});

Mudah bukan? Kami hanya menyemak sama ada permainan itu dikeluarkan sebelum 2009, dan jika ya, kembalikan permainan itu.

Anda juga boleh terus memanipulasi kandungan koleksi, seperti yang ditunjukkan di bawah:

var games = new GamesCollection
games.get(0);

Coretan kod di atas menunjukkan koleksi baharu dan kemudian mendapatkan semula model dengan ID 0. Anda boleh mencari elemen pada kedudukan tertentu dengan merujuk indeks kaedah at seperti ini: permainan.at(0); Akhir sekali, anda boleh mengisi koleksi anda secara dinamik seperti ini:

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  url: '/games'
  }
});

var games = new GamesCollection
games.fetch();

Kami hanya membiarkan Backbone mendapatkan data dari mana sahaja ia berada melalui atribut

. Setelah selesai, kami hanya mencipta objek baharu dan memanggil kaedah fetch, yang mencetuskan panggilan tak segerak ke pelayan dan mengisi koleksi dengan hasilnya. Ini sepatutnya merangkumi asas koleksi Tulang Belakang. Seperti yang saya nyatakan, terdapat banyak perkara yang bagus di sini, dengan Backbone menyamakan banyak utiliti bagus daripada perpustakaan Underscore. Bacaan cepat dokumentasi rasmi seharusnya membantu anda bermula.

Pandangan dalam Tulang Belakang boleh menjadi agak mengelirukan pada pandangan pertama. Bagi pemurni MVC, mereka menyerupai pengawal dan bukannya melihat diri mereka sendiri.

Pandangan pada asasnya mengendalikan dua tanggungjawab:

• Tunjukkan keadaan aplikasi dan model data kepada pengguna.
Mari teruskan dan cipta pandangan yang sangat mudah.

GameView= Backbone.View.extend({
  tagName : "div",
  className: "game",
  render : function() {
    // code for rendering the HTML for the view
  }
});

Jika anda telah mengikuti tutorial ini setakat ini, ia agak mudah. Saya hanya menyatakan elemen HTML yang harus digunakan untuk membungkus paparan melalui atribut

dan IDnya melalui className.

让我们继续进行渲染部分。

  render : function() {
    this.el.innerHTML = this.model.get('name');
	 
	 //Or the jQuery way
	 $(this.el).html(this.model.get('name'));
  }

events: {
        'click .name': 'handleClick'
    },
	 
handleClick: function(){
		  alert('In the name of science... you monster');
		  
		  // Other actions as necessary
}

GameView= Backbone.View.extend({
initialize: function (args) {
        _.bindAll(this, 'changeName');
		  this.model.bind('change:name', this.changeName);
},
});

var Hashbangs = Backbone.Controller.extend({
  routes: {
    "!/":                 "root",
    "!/games":        "games",
  },
  root: function() {
    // Prep the home page and render stuff
  },

  games: function() {
    // Re-render views to show a collection of books
  },
  });

// Init the controller like so
var ApplicationController = new Controller; 

Backbone.history.start();