Hayati dunia Ember.js

Terdapat banyak perpustakaan JavaScript yang tersedia, dan kebanyakannya sangat baik dalam menyediakan interaksi berpusatkan DOM tradisional yang diperlukan oleh tapak web biasa. Tetapi apabila ia datang untuk membina asas kod yang boleh diurus untuk aplikasi satu halaman, satu set rangka kerja baharu diperlukan untuk menyelesaikan masalah tersebut.

Seperti kata pepatah lama: "Gunakan alat terbaik untuk kerja itu."

Bukannya perpustakaan tradisional seperti jQuery tidak dapat membantu anda membina pengalaman seperti desktop, ia bukan kes penggunaannya dan tidak mempunyai ciri seperti pengikatan data, penghalaan acara dan pengurusan negeri. Sudah tentu, anda mungkin boleh menggabungkan sekumpulan pemalam untuk melaksanakan beberapa ciri ini, tetapi pada pendapat saya adalah lebih masuk akal untuk memulakan dengan rangka kerja yang dibina khusus dari bawah untuk menyelesaikan masalah khusus ini. Seperti kata pepatah lama: "Gunakan alat terbaik untuk kerja itu."

Saya baru-baru ini mengadakan temu bual dengan pasukan Ember.js; motivasi saya adalah untuk mengetahui tentang perkara yang saya panggil "perkara hangat baharu": Ember.js.

Ember memenuhi keperluan yang saya nyatakan di atas, dan dengan cara yang mengingatkan cara jQuery menyediakan pembangun dan berjalan dengan cepat. Pasukan itu sengaja mengambil langkah untuk mengasingkan banyak kerumitan yang wujud dalam mereka bentuk dan membina aplikasi berasaskan model/pandangan/pengawal, memanfaatkan kepakaran dan pengetahuan bertahun-tahun yang diperoleh daripada membina aplikasi besar.

Apa yang saya mahu lakukan ialah membantu anda menggunakan Ember.js melalui siri artikel berbilang bahagian yang akan memperkenalkan anda kepada konsep rangka kerja langkah demi langkah. Kami akan mulakan dengan pengenalan biasa (yang kebetulan artikel ini) dan kemudian secara beransur-ansur membina aplikasi lengkap. Paling penting, ini juga akan membantu saya mengukuhkan konsep yang telah saya pelajari dan mungkin mempelajari beberapa teknik baharu! Saya akan melakukan yang terbaik untuk meminta pasukan Ember.js menyemak bahan ini untuk ketepatan dan mungkin juga menyumbang sesuatu yang berharga kepadanya.

Sebelum kami meneruskan, sila ambil perhatian: Ember.js membawa banyak keajaiban kepada anda. Kadangkala anda melihat kod dan berkata "Hah? Bagaimanakah ia melakukannya?" Sebaliknya, saya akan membincangkan cara memanfaatkan alatan dan APInya untuk membina aplikasi anda.

Jadi mari kita mulakan.

---

Konsep Teras

Ember.js bukan rangka kerja untuk membina tapak web tradisional.

Perkara pertama yang perlu diingat ialah Ember.js bukanlah rangka kerja untuk membina tapak web tradisional. Perpustakaan seperti jQuery dan MooTools sangat bagus untuk ini. Jika anda mempertimbangkan Ember.js, andaian kami ialah anda ingin membina pengalaman seperti desktop - terutamanya pengalaman yang boleh skala. Malah, slogan rangka kerja itu ialah "Rangka kerja untuk membangunkan aplikasi web yang bercita-cita tinggi," yang memberitahu anda bahawa ia jelas bukan pustaka JavaScript ayah anda.

Saya nyatakan sebelum ini bahawa Ember memanfaatkan corak MVC untuk mempromosikan pengurusan dan organisasi kod yang betul. Jika anda tidak pernah melakukan pembangunan berasaskan MVC, anda pasti perlu membacanya. Nettuts+ mempunyai artikel hebat mengenai topik ini. Bagi anda yang biasa dengan konsep ini, anda sepatutnya berasa seperti di rumah sendiri. Satu perkara yang selalu saya dengar ialah berhijrah dari Backbone ke Ember.js sebenarnya mudah kerana Ember melakukan banyak beban berat untuk anda sambil mengekalkan corak organisasi kod yang biasa dilakukan oleh pembangun. p>

Ember juga bergantung pada templat sisi pelanggan...banyak. Ia menggunakan perpustakaan templat Handlebars, yang menyediakan ungkapan yang membolehkan anda membuat templat berasaskan HTML dinamik. Pembangun Ember boleh mengikat data pada ungkapan boleh terbenam ini dan menukar paparan aplikasi mereka secara dinamik. Sebagai contoh, saya boleh membuat templat yang mengambil satu set orang dan memaparkan mereka dalam senarai tidak tersusun:

<ul>
 {{#each people}}
   <li>Hello, {{name}}!</li>
 {{/each}}
</ul>

Perhatikan bahawa ungkapan "#each" digunakan sebagai arahan gelung, menyenaraikan setiap elemen tatasusunan "orang" dan menggantikan ungkapan "{{name}}" dengan nilai sebenar. Ambil perhatian bahawa kurungan berganda ialah penanda yang digunakan oleh Handlebars untuk mengenal pasti ungkapan. Ini adalah contoh kecil, kita akan mendapatkan butiran lanjut kemudian.

Hendal ialah enjin templat sebelah pelanggan yang sangat berkuasa, dan saya syorkan anda menyemak bukan sahaja panduan Ember, tetapi juga tapak web Handlebars sendiri untuk memahami sepenuhnya pilihan yang tersedia. Anda akan banyak menggunakannya.

---

Sediakan Ember

Ember.js bergantung pada perpustakaan lain, jadi anda perlu mendapatkan salinan jQuery dan Handlebars. Tetapi tunggu, bukankah saya mengatakan bahawa jQuery dan Ember berfungsi dalam ruang yang berbeza? Ya, saya lakukan, tetapi inilah perkaranya: Pasukan Ember komited untuk tidak mencipta semula roda. Mereka memilih jQuery untuk melakukan yang terbaik: bekerja dengan DOM. Ini adalah perkara yang baik kerana jQuery benar-benar mahir dalam hal ini. Itulah sebabnya mereka memilih Handlebars, perpustakaan templat hebat yang kebetulan ditulis oleh ahli pasukan teras Ember Yehuda Katz.

Cara paling mudah untuk mendapatkan fail yang anda perlukan adalah dengan melawati repositori Ember.js Github dan memuat turun kit permulaan. Berikut ialah contoh untuk anda bermula. Pada masa penulisan, ia mengandungi:

• 人类 1.0 RC1
• 处理栏 1.0 RC3
• jQuery 1.9.1

还有一个基本的 html 模板，其编码包含所有关联的库（jQuery、Ember 等），以及 Handlebars 模板和“app.js”的示例，其中包含用于启动基本的 Ember 应用程序。

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>

请注意，app.js 不是框架的一部分。这是一个普通的 ole JavaScript 文件；您可以将其命名为任何您想要的名称。而且，虽然我们将在本教程系列中使用它，但以后您可能最终会将 JavaScript 拆分为多个文件，就像处理任何其他网站或应用程序一样。此外，Ember 并不期望您的框架文件有特定的目录结构。

当您查看入门工具包代码时，它可能看起来像典型的网站代码。从某些方面来说，你是对的！不过，一旦我们开始组织事情，您就会看到构建 Ember 应用程序有何不同。

---

余烬之地的布局

在开始编写代码之前，了解 Ember.js 的工作原理以及了解构成 Ember 应用程序的移动部件非常重要。让我们看一下这些部分以及它们之间的关系。

---

模板

模板是定义用户界面的关键部分。正如我之前提到的，Handlebars 是 Ember 中使用的客户端库，在为应用程序创建 UI 时广泛使用该库提供的表达式。这是一个简单的例子：

<script type="text/x-handlebars">
     <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

请注意，表达式会混合到 HTML 标记中，并通过 Ember 动态更改页面上显示的内容。在这种情况下，{{firstName}} 和 {{lastName}} 占位符将被从应用检索的数据替换。

Handlebars 通过灵活的 API 提供强大的功能。了解它提供的功能对您来说非常重要。

---

路由

应用程序的路由器有助于管理应用程序的状态。

应用程序的路由器有助于管理应用程序的状态以及用户导航应用程序时所需的资源。这可能包括从模型请求数据、将控制器连接到视图或显示模板等任务。

您可以通过为应用程序中的特定位置创建一条路线来实现此目的。路由指定应用程序的各个部分以及与其关联的 URL。 URL 是 Ember 用于了解需要向用户呈现哪种应用程序状态的关键标识符。

App.Router.map( function() {
   this.route( 'about' ); // Takes us to "/about"
});

路由的行为（例如：从模型请求数据）通过 Ember 路由对象的实例进行管理，并在用户导航到特定 URL 时触发。一个示例是从模型请求数据，如下所示：

App.EmployeesRoute = Ember.Route.extend({
   model: function() {
       return App.Employee.find();
   }
});

在本例中，当用户导航到应用程序的“/employees”部分时，路由会向模型请求所有员工的列表。

---

模型

数据的对象表示。

模型是应用程序将使用的数据的对象表示。它可以是一个简单的数组或通过 Ajax 请求从 RESTful JSON API 动态检索的数据。 Ember 数据库提供了用于在应用程序中加载、映射和更新数据到模型的 API。

---

控制器

控制器通常用于存储和表示模型数据和属性。它们就像代理一样，使您可以访问模型的属性并允许模板访问它们以动态渲染显示。这就是模板始终连接到控制器的原因。

要记住的主要事情是，当模型检索数据时，您将使用控制器以编程方式将该数据公开给应用程序的不同部分。虽然模型和控制器看起来紧密耦合，但事实上，模型本身并不知道稍后将使用它们的控制器。

您还可以存储需要保留但不需要保存到服务器的其他应用程序属性。

---

观看次数

Ember.js 中的视图旨在管理围绕用户交互的事件，并将其转换为在应用程序中有意义的事件。因此，如果用户单击按钮来删除员工，则视图负责解释本机浏览器单击事件并在应用程序当前状态的上下文中对其进行适当处理。

---

命名约定

Ember.js 帮助最大程度地减少所需代码量并在幕后为您处理事务的方法之一是通过命名约定。定义和命名路由（和资源）的方式会影响控制器、模型、视图和模板的命名。例如，如果我创建一条名为“employees”的路线：

App.Router.map( function() {
   this.resource( 'employees' );
});

然后我会命名我的组件，如下所示：

• Objek laluan: App.EmployeesRoute
• Pengawal: App.EmployeesController
• Model: Apl.Pekerja
• Lihat: App.EmployeesView
• Templat: Pekerja

Menggunakan konvensyen penamaan ini mempunyai dua tujuan. Pertama, ia memberi anda hubungan semantik antara komponen yang serupa. Kedua, Ember secara automatik boleh mencipta objek yang diperlukan yang mungkin tidak wujud (contohnya: objek laluan atau pengawal) dan menyambungkannya untuk digunakan dalam aplikasi anda. Inilah "sihir" yang saya sebutkan tadi. Sebenarnya, inilah yang Ember lakukan pada peringkat aplikasi global apabila anda membuat instantiat objek Aplikasi:

var App = Ember.Application.create();

Barisan tunggal ini mencipta rujukan lalai kepada penghala, pengawal, paparan dan templat aplikasi.

• Objek laluan: App.ApplicationRoute
• Pengawal: App.ApplicationController
• Lihat: App.ApplicationView
• Templat:Apl

Berbalik ke laluan "pekerja" yang saya buat di atas, apabila pengguna menavigasi ke "/pekerja" dalam aplikasi, Ember akan mencari objek berikut:

• App.EmployeesRoute
• App.EmployeesController
• PekerjaTemplat

Jika ia tidak ditemui, ia akan mencipta contoh setiap satu tetapi tidak akan memaparkan apa-apa kerana anda belum menentukan model untuk mendapatkan data daripada atau templat untuk digunakan untuk memaparkan data. Inilah sebabnya mengapa konvensyen penamaan adalah sangat penting. Ia membolehkan Ember mengetahui cara mengendalikan tugas yang berkaitan dengan laluan tertentu tanpa memerlukan anda menyambung secara manual.

Sila ambil perhatian bahawa dalam contoh pertama, saya menggunakan nama tunggal "Pekerja" untuk mentakrifkan model. Ini disengajakan. Sifat nama "pekerja" menentukan bahawa saya mungkin bekerja dengan sifar kepada ramai pekerja, jadi adalah penting untuk membina model yang mempunyai fleksibiliti untuk memulangkan seorang pekerja atau semua pekerja. Konvensyen penamaan tunggal untuk model bukanlah keperluan untuk Ember kerana model itu sendiri tidak mengetahui pengawal yang akan menggunakannya kemudian. Oleh itu, anda boleh menjadi fleksibel dalam menamakan mereka, tetapi demi konsistensi, mematuhi konvensyen ini akan memudahkan pengurusan kod anda.

Selain itu, saya memilih untuk menggunakan kaedah resource() untuk menentukan laluan saya kerana dalam kes ini saya berkemungkinan besar akan menggunakan laluan bersarang untuk mengurus halaman butiran untuk maklumat pekerja tertentu. Kami akan membincangkan bersarang kemudian dalam siri ini.

Pengambilan utama ialah dengan menggunakan skema penamaan yang konsisten, Ember memudahkan untuk menguruskan cangkuk yang mengikat komponen ini bersama-sama tanpa perlu mentakrifkan perhubungan secara eksplisit melalui banyak kod.

Butiran penuh konvensyen penamaan Ember tersedia di tapak web projek, mesti dibaca.

---

Langkah seterusnya: Bina apl

Dalam bahagian seterusnya siri ini, kami akan menyelidiki kod untuk mencipta asas untuk aplikasi kami.

Kami telah menyemak konsep teras Ember dan membincangkan aspek utama rangka kerja peringkat tinggi. Dalam bahagian seterusnya siri ini, kami akan menyelidiki kod untuk mencipta asas untuk aplikasi kami. Sementara itu, saya ingin sekali lagi mengesyorkan agar anda mula melihat dokumentasi untuk Handlebars untuk memahami sintaks ungkapan. Selain itu, jika anda benar-benar tidak sabar untuk memasuki Ember, nantikan Tuts+ Premium, yang tidak lama lagi akan menawarkan kursus lengkap yang membimbing anda membina aplikasi berasaskan Ember!

Seperti yang saya nyatakan pada permulaan artikel ini, pasukan teras Ember.js mengetuai Yehuda Katz dan Tom Dale menyemak kandungan ini untuk ketepatan dan memberikannya tanda tangan. Pasukan Ember diluluskan! Jumpa lagi!

Atas ialah kandungan terperinci Hayati dunia Ember.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!