Ember.js への参入パート 3: より深く掘り下げる

Ember.js は強力だが独自の意見を持つフレームワークであることを認識し始めていただければ幸いです。まだ表面をなぞっただけなので、本当に役立つものを構築する前に、学ぶべきことはたくさんあります。今後も Ember スターター キットを使用していきます。シリーズのこのパートでは、Ember のデータにアクセスして管理する方法を確認します。

---

データを使用する

前の記事では、コントローラーで定義された静的な色の名前のセットを使用しました。

リーリー

これにより、コントローラーはデータを インデックス テンプレートに公開できるようになります。これはデモにとっては魅力的ですが、実際には、データ ソースはハードコードされた配列ではありません。

ここでモデルが登場します。モデルは、アプリケーションによって使用されるデータのオブジェクト表現です。これは、単純な配列、または RESTful JSON API から動的に取得されたデータの場合があります。データ自体には、モデルのプロパティを参照することでアクセスします。したがって、結果を次のように見ると:

リーリー

モデルで公開されるプロパティは次のとおりです:

＃＃＃ログイン＃＃＃ ＃＃＃手＃＃＃ ＃＃＃年＃＃＃ ＃＃＃性別＃＃＃
• モデルのプロパティを参照してデータ自体にアクセスします。
上記のコードからわかるように、静的ストレージを定義できますが、ほとんどの場合、モデルの定義には Ember.Object を使用します。
• Ember.Object
をサブクラス化すると、(たとえば、Ajax 呼び出し経由で) データを返し、モデルを定義できるようになります。コントローラーでデータを明示的に設定することもできますが、懸念事項の分離とコード編成のベスト プラクティスを遵守するために、モデルを作成することを常にお勧めします。

また、Ember Data という姉妹フレームワークを使用することもできます。これは ORM に似た API および永続ストアですが、この記事の執筆時点では流動的な状態であることを強調しておく必要があります。これには多くの可能性がありますが、現時点では

Ember.Object

を使用する方が安全です。 Discourse の共同創設者 Robin Ward は、Ember データなしで Ember を使用することについて素晴らしいブログ投稿を書きました。ここではそのプロセスの概要を説明しますので、詳しく説明します。

モデルの定義

以下の例では、非公式の Hacker News API を使用して、ニュース ソースから JSON ベースのデータを抽出します。このデータはモデルに保存され、後でコントローラーによってテンプレートに入力されるために使用されます。 API から返されたデータを見ると、使用するプロパティを理解できます。

リーリー すべてのタイトルとストーリー情報を含む items

属性を使用したいと考えています。 SQL データベースを使用した場合は、

---

items

の各要素をレコードおよび属性名として扱います (例:

title

、

url

、id##) # など) はフィールド名として扱われます。これらのプロパティ名は、モデルを作成するための完璧なインターフェイスであるモデル オブジェクトのプロパティとして使用されるため、レイアウトを理解することが重要です。 Ember.Object はすべての Ember オブジェクトの主要な基本クラスであり、extend() メソッドを使用してモデルを作成するためにサブクラス化します。

これを行うには、

App.IndexRoute

を定義するコードの直後に次のコードを js/app.js に追加します。 リーリー App.Item

は Hacker News データのモデル クラスとして使用されますが、そのデータを取得または操作するメソッドはありません。したがって、これらを定義する必要があります:

リーリー

このコードを分解してみましょう。まず、Ember の reopenClass() メソッドを使用して、新しいメソッドを App.Item クラスに追加し、必要なメソッドを含むオブジェクトをそれに渡します。この例では、

all()

というメソッドのみが必要です。このメソッドは、Hacker News ホーム ページからすべての見出しを返します。 jQuery は Ember プロトコルの一部であるため、その単純な Ajax API を使用できます。 API は JSONP を使用して JSON データを返すため、$.getJSON() を使用して次のリクエストを行うことができます:

リーリー

"callback=?" は、これが JSONP リクエストであり、データ (取得後) が jQuery の Promise 機能を使用して定義された匿名コールバック ハンドラーに渡されることを jQuery に伝えます。 リーリー JSON データを Ember オブジェクトに簡単に挿入できます。 response パラメーターには JSON データが含まれているため、レコードをループして、ローカルの items

配列を

App.Item

のインスタンスで更新できます。最後に、

all()

が実行されると、新しく設定された配列が返されます。ここまでお話しましたが、要約してみましょう:

• 通过使用 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 id="Welcome-to-Ember-js">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 id="Welcome-to-Ember-js">Welcome to Ember.js</h2>

与：

<h2 id="headerName">{{headerName}}</h2>

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

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

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

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

---

下一步...模板

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

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

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

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

以上がEmber.js への参入パート 3: より深く掘り下げるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。