Masukkan Ember.js Bahagian Ketiga: Menyelam Lebih Dalam

Saya harap anda mula sedar bahawa Ember.js ialah rangka kerja yang berkuasa tetapi mempunyai pendapat. Kami hanya menconteng permukaannya; terdapat banyak lagi yang perlu dipelajari sebelum kami boleh membina sesuatu yang benar-benar berguna! Kami akan terus menggunakan kit permulaan Ember. Dalam bahagian siri ini, kami akan menyemak cara mengakses dan mengurus data dalam Ember.

---

Data Penggunaan

Dalam artikel sebelumnya kami menggunakan set statik nama warna yang ditakrifkan dalam pengawal:

App.IndexRoute = Ember.Route.extend({
 setupController: function(controller) {
   controller.set('content', ['red', 'yellow', 'blue']);
 }
});

Ini membolehkan pengawal mendedahkan data kepada templat diindeks. Ini comel untuk tunjuk cara, tetapi dalam kehidupan sebenar sumber data kami tidak akan menjadi tatasusunan berkod keras.

Di sinilah model masuk. Model ialah perwakilan objek data yang digunakan oleh aplikasi. Ia boleh menjadi tatasusunan ringkas atau data yang diambil secara dinamik daripada API JSON RESTful. Data itu sendiri diakses dengan merujuk sifat model. Jadi kalau kita tengok hasil macam ni:

{
   "login": "rey",
   "id": 1,
   "age": 45,
   "gender": "male"
}

Sifat yang terdedah dalam model ialah:

• log masuk
• Tangan
• umur
• jantina

Akses data itu sendiri dengan merujuk sifat model.

Seperti yang anda lihat daripada kod di atas, anda boleh menentukan storan statik, tetapi kebanyakan masa anda akan menggunakan Ember.Object untuk menentukan model. Dengan subkelas Ember.Object anda akan dapat mengembalikan data (cth. melalui panggilan Ajax) dan menentukan model anda. Walaupun anda boleh menetapkan data secara eksplisit dalam pengawal, anda sentiasa disyorkan untuk mencipta model untuk mematuhi pengasingan kebimbangan dan amalan terbaik organisasi kod. Ember.Object，您将能够返回数据（例如：通过 Ajax 调用）并定义您的模型。虽然您可以在控制器中显式设置数据，但始终建议您创建一个模型，以便遵守关注点分离和代码组织最佳实践。

或者，您可以使用名为 Ember Data 的姊妹框架。它是一个类似 ORM 的 API 和持久性存储，但我需要强调的是，在撰写本文时它正处于不断变化的状态。它有很大的潜力，但是此时使用 Ember.Object 更安全。 Discourse 的联合创始人 Robin Ward 撰写了一篇关于在没有 Ember 数据的情况下使用 Ember 的精彩博客文章。它概述了他们的流程，我将为您分解。

---

定义模型

在下面的示例中，我将使用非官方的 Hacker News API 从新闻资源中提取基于 JSON 的数据。该数据将存储在我的模型中，稍后由控制器用来填充模板。如果我们查看从 API 返回的数据，我们就可以了解我们将使用的属性：

{
  "nextId": null,
  "items": [{
          "title": "Docker, the Linux container runtime: now open-source",
          "url": "http://docker.io",
          "id": 5445387,
          "commentCount": 39,
          "points": 146,
          "postedAgo": "2 hours ago",
          "postedBy": "shykes"
      }, {
          "title": "What\u0027s Actually Wrong with Yahoo\u0027s Purchase of Summly",
          "url": "http://hackingdistributed.com/2013/03/26/summly/",
          "id": 5445159,
          "commentCount": 99,
          "points": 133,
          "postedAgo": "2 hours ago",
          "postedBy": "hoonose"
      },
  ],
  "version": "1.0",
  "cachedOnUTC": "\/Date(1364333188244)\/"
}

我想使用 items 属性，其中包含所有标题和故事信息。如果您使用过 SQL 数据库，请将 items 的每个元素视为一条记录，并将属性名称（即：title、url、id 等）视为字段名称。理解布局很重要，因为这些属性名称将用作模型对象的属性，这是创建模型的完美衔接。

Ember.Object 是所有 Ember 对象的主要基类，我们将对其进行子类化以使用其 extend() 方法创建我们的模型。

为此，我们将在定义 App.IndexRoute 的代码之后立即将以下代码添加到 js/app.js 中：

App.Item = Ember.Object.extend();

App.Item 用作黑客新闻数据的模型类，但它没有检索或操作该数据的方法。因此，我们需要定义这些：

App.Item.reopenClass({
  all: function() {
      return $.getJSON("http://api.ihackernews.com/page?format=jsonp&callback=?").then(function(response) {
        var items = [];

        response.items.forEach( function (item) {
          items.push( App.Item.create(item) );
        });

	      return items;
      });
  }
});

让我们分解一下这段代码。首先，我们使用 Ember 的 reopenClass() 方法将新方法添加到 App.Item 类中，然后向其传递一个包含我们所需方法的对象。对于此示例，我们只需要一个名为 all() 的方法：它返回黑客新闻首页的所有标题。因为 jQuery 是 Ember 协议的一部分，所以我们可以使用它简单的 Ajax API。 API使用JSONP返回JSON数据；所以，我可以使用 $.getJSON() 向以下位置发出请求：

$.getJSON("http://api.ihackernews.com/page?format=jsonp&callback=?")

“回调=？”告诉 jQuery 这是一个 JSONP 请求，并且数据（一旦检索到）将传递到使用 jQuery 的 Promise 功能定义的匿名回调处理程序：

.then(function(response) {...});

我可以轻松地将 JSON 数据注入 Ember 对象。

response 参数包含 JSON 数据，允许您循环记录并使用 App.Item 的实例更新本地 items 数组。最后，当 all()

Sebagai alternatif, anda boleh menggunakan rangka kerja saudara yang dipanggil Ember Data. Ia adalah API seperti ORM dan kedai ketekunan, tetapi saya perlu menekankan bahawa ia berada dalam keadaan fluks pada masa penulisan. Ia mempunyai banyak potensi, tetapi pada masa ini adalah lebih selamat untuk menggunakan Ember.Object. Pengasas bersama Discourse Robin Ward menulis catatan blog yang hebat tentang menggunakan Ember tanpa data Ember. Ia menggariskan proses mereka dan saya akan memecahkannya untuk anda. 🎜 🎜 🎜Tentukan model🎜 🎜Dalam contoh di bawah, saya akan menggunakan API Berita Hacker tidak rasmi untuk mengekstrak data berasaskan JSON daripada sumber berita. Data ini akan disimpan dalam model saya dan kemudiannya digunakan oleh pengawal untuk mengisi templat. Jika kita melihat data yang dikembalikan daripada API, kita boleh memahami sifat yang akan kita gunakan: 🎜

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

🎜Saya ingin menggunakan atribut item yang mengandungi semua tajuk dan maklumat cerita. Jika anda telah menggunakan pangkalan data SQL, layan setiap elemen item sebagai rekod dan nama atribut (iaitu: title, url , id, dsb.) dianggap sebagai nama medan. Adalah penting untuk memahami reka letak kerana nama sifat ini akan digunakan sebagai sifat objek model, yang merupakan antara muka yang sempurna untuk mencipta model. 🎜

🎜Ember.Object ialah kelas asas utama untuk semua objek Ember, yang akan kami subkelaskan untuk mencipta model kami menggunakan kaedah extend()nya. 🎜🎜 🎜Untuk melakukan ini, kami akan menambah kod berikut pada 🎜js/app.js🎜 sejurus selepas kod yang mentakrifkan App.IndexRoute: 🎜

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Item.all();
  }
});

🎜App.Item digunakan sebagai kelas model untuk data Hacker News, tetapi ia tidak mempunyai kaedah untuk mendapatkan atau memanipulasi data tersebut. Oleh itu, kita perlu mentakrifkan ini: 🎜

{{#each item in model}}
    <li>{{item}}</li>
{{/each}}

🎜Mari pecahkan kod ini. Mula-mula, kami menambah kaedah baharu pada kelas App.Item menggunakan kaedah reopenClass() Ember, dan kemudian berikan objek yang mengandungi kaedah yang kami perlukan. Untuk contoh ini, kami hanya memerlukan kaedah yang dipanggil all(): ia mengembalikan semua tajuk dari halaman utama Berita Hacker. Oleh kerana jQuery adalah sebahagian daripada protokol Ember, kami boleh menggunakan API Ajaxnya yang ringkas. API menggunakan JSONP untuk mengembalikan data JSON; jadi, saya boleh menggunakan $.getJSON() untuk membuat permintaan kepada: 🎜

<h3>Welcome to Ember.js</h3>
<ul><li>Persona is distributed. Today.</li>
<li>21 graphs that show America's health-care prices are ludicrous</li>
<li>10 000 concurrent real-time connections to Django</li>
<li>Docker, the Linux container runtime: now open-source</li>
<li>Let's Say FeedBurner Shuts Down…</li></ul>

🎜 "panggilan balik=?" memberitahu jQuery bahawa ini adalah permintaan JSONP dan data (sekali diambil) akan dihantar kepada pengendali panggilan balik tanpa nama yang ditakrifkan menggunakan ciri Janji jQuery: 🎜

{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}

🎜🎜Saya boleh menyuntik data JSON ke dalam objek Ember dengan mudah. 🎜🎜 🎜Parameter respons mengandungi data JSON, membolehkan anda mengulangi rekod dan mengemas kini tatasusunan item setempat dengan contoh App.Item. Akhir sekali, apabila all() dilaksanakan, kami mengembalikan tatasusunan yang baru diisi. Setelah berkata begitu banyak, izinkan saya meringkaskan: 🎜

• 通过使用 extend() 子类化 Ember.Object 来创建新模型类。
• 使用 reopenClass() 添加模型方法。
• 进行 Ajax 调用来检索您的数据。
• 循环数据，创建 Item 对象并将其推入数组中。
• 方法执行时返回数组。

如果您刷新index.html，您将看到没有任何变化。这是有道理的，因为模型刚刚被定义；我们还没有访问过它。

---

公开您的数据

控制器的作用类似于代理，使您可以访问模型的属性并允许模板访问它们以便动态渲染显示。除了从关联模型访问属性之外，控制器还可以存储需要持久保存的其他应用程序属性，而无需保存到服务器。

目前，我们的应用程序具有以下控制器（定义静态数据集的控制器）：

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

我们可以使用 model 方法（又名模型钩子）直接将我们的模型与 App.IndexRoute 关联起来：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Item.all();
  }
});

请记住，如果您自己没有显式定义控制器，那么 Ember 会定义您的控制器，这就是本例中发生的情况。

在幕后，Ember 创建 IndexController 作为 Ember.ArrayController 的实例，并使用 model 方法中指定的模型。

现在我们只需要更新索引模板即可访问新属性。打开index.html，我们可以看到以下Handlebars模板代码：

{{#each item in model}}
    <li>{{item}}</li>
{{/each}}

通过一个小更改（添加 title 属性），我们可以立即看到从 Hacker News API 返回的标题：

{{item.title}}

如果您现在刷新浏览器，您应该会看到类似以下内容的内容：

<h3>Welcome to Ember.js</h3>
<ul><li>Persona is distributed. Today.</li>
<li>21 graphs that show America's health-care prices are ludicrous</li>
<li>10 000 concurrent real-time connections to Django</li>
<li>Docker, the Linux container runtime: now open-source</li>
<li>Let's Say FeedBurner Shuts Down…</li></ul>

如果您想显示更多信息，只需添加更多属性：

{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}

刷新即可查看您所做的更新。这就是 Handlebars 的魅力所在；它使得向用户界面添加新数据元素变得微不足道。

正如我之前提到的，控制器还可以用于定义需要在应用程序的整个生命周期中保留的静态属性。例如，我可能想保留某些静态内容，如下所示：

App.IndexController = Ember.ObjectController.extend({
  headerName: 'Welcome to the Hacker News App',
  appVersion:  2.1
});

在这里，我将 Ember.ObjectController 子类化，为我的 index 路由和模板创建一个新的控制器。我现在可以转到 index.html 并更新我的模板以替换以下内容：

<h2>Welcome to Ember.js</h2>

与：

<h2>{{headerName}}</h2>

模型是应用程序使用的数据的对象表示。

Handlebars 将采用我的控制器中的指定属性，并用其同名值动态替换 {{headerName}} 占位符。强调两件事很重要：

• 通过遵守 Ember 的命名约定，我无需进行任何接线即可将控制器与索引模板一起使用。
• 即使我显式创建了 IndexController，Ember 也足够聪明，不会覆盖通过路由关联的现有模型。

这是非常强大且灵活的东西！

---

下一步...模板

在 Ember 中处理数据并不困难。实际上，最困难的部分是使用网络上大量的各种 API。

事实上，我可以轻松地将 JSON 数据输入到 Ember 对象中，这使得管理变得更加容易 — 尽管我从来都不是客户端大型数据集的忠实粉丝，尤其是当表示为对象时.

这是我必须做更多测试的事情，我希望 Ember Data 能让这一切变得微不足道。

话虽如此，我在本文中简要介绍了模板。它们非常重要……以至于我想在自己的文章中讨论这个主题。因此，在下一篇文章中，我们将介绍如何利用 Handelbars 构建用户界面，并深入了解模板框架提供的各种指令。

Atas ialah kandungan terperinci Masukkan Ember.js Bahagian Ketiga: Menyelam Lebih Dalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!