Entdecken Sie die Welt von Ember.js

Es sind viele JavaScript-Bibliotheken verfügbar, und die meisten von ihnen sind sehr gut darin, die traditionellen DOM-zentrierten Interaktionen bereitzustellen, die für typische Websites erforderlich sind. Wenn es jedoch darum geht, eine verwaltbare Codebasis für eine Single-Page-Anwendung zu erstellen, sind ganz neue Frameworks erforderlich, um das Problem zu lösen.

Wie das alte Sprichwort sagt: „Verwenden Sie das beste Werkzeug für den Job.“

Es ist nicht so, dass eine herkömmliche Bibliothek wie jQuery Ihnen nicht dabei helfen kann, Desktop-ähnliche Erfahrungen zu erstellen, sie ist einfach nicht ihr Anwendungsfall und verfügt nicht über Funktionen wie Datenbindung, Ereignisweiterleitung und Zustandsverwaltung. Natürlich könnten Sie wahrscheinlich eine Reihe von Plugins zusammenschustern, um einige dieser Funktionen zu implementieren, aber meiner Meinung nach ist es sinnvoller, mit einem Framework zu beginnen, das von Grund auf speziell für die Lösung dieser spezifischen Probleme entwickelt wurde. Wie das alte Sprichwort sagt: „Verwenden Sie das beste Werkzeug für den Job.“

Ich hatte kürzlich ein Interview mit dem Ember.js-Team. Meine Motivation bestand darin, etwas über das zu erfahren, was ich „das neue heiße Ding“ nenne: Ember.js.

Ember erfüllt die oben beschriebenen Anforderungen und erinnert in gewisser Weise daran, wie jQuery Entwickler schnell zum Laufen bringt. Das Team hat bewusst Schritte unternommen, um viele der Komplexitäten zu abstrahieren, die mit dem Entwerfen und Erstellen modell-/ansichts-/controllerbasierter Anwendungen verbunden sind, und dabei jahrelanges Fachwissen und Wissen aus der Erstellung großer Anwendungen genutzt.

Ich möchte Ihnen helfen, sich mit Ember.js vertraut zu machen, und zwar durch eine mehrteilige Artikelserie, die Sie Schritt für Schritt in die Konzepte des Frameworks einführt. Wir beginnen mit der üblichen Einführung (die zufällig dieser Artikel ist) und erstellen dann nach und nach eine vollständige Anwendung. Das Beste daran ist, dass mir dies auch dabei hilft, die Konzepte, die ich gelernt habe, zu festigen und vielleicht einige neue Techniken zu erlernen! Ich werde mein Bestes tun, damit das Ember.js-Team dieses Material auf Richtigkeit überprüft und vielleicht sogar etwas Wertvolles dazu beiträgt.

Bevor wir fortfahren, beachten Sie bitte: Ember.js bringt viel Magie mit sich. Manchmal schaut man sich den Code an und fragt sich: „Huh? Wie macht das das?“ Ich war dort und versuche, einige Dinge herauszuarbeiten, aber ich werde mich nicht mit den Interna des Ember-Framework-Codes befassen. Stattdessen bespreche ich, wie Sie die Tools und APIs nutzen können, um Ihre Anwendungen zu erstellen.

Also fangen wir an.

---

Kernkonzept

Ember.js ist kein Framework zum Erstellen traditioneller Websites.

Das Erste, woran Sie denken sollten, ist, dass Ember.js kein Framework für die Erstellung traditioneller Websites ist. Bibliotheken wie jQuery und MooTools eignen sich hierfür hervorragend. Wenn Sie Ember.js in Betracht ziehen, gehen wir davon aus, dass Sie Desktop-ähnliche Erfahrungen erstellen möchten – insbesondere solche, die skalierbar sind. Tatsächlich lautet der Slogan des Frameworks „Ein Framework für die Entwicklung anspruchsvoller Webanwendungen“, was Ihnen sagt, dass es sich eindeutig nicht um die JavaScript-Bibliothek Ihres Vaters handelt.

Ich habe bereits erwähnt, dass Ember das MVC-Muster nutzt, um eine ordnungsgemäße Codeverwaltung und -organisation zu fördern. Wenn Sie noch nie MVC-basierte Entwicklung betrieben haben, sollten Sie es unbedingt lesen. Nettuts+ hat einen tollen Artikel zu diesem Thema. Diejenigen unter Ihnen, die mit diesen Konzepten vertraut sind, sollten sich wie zu Hause fühlen. Ich höre immer wieder, dass die Migration von Backbone zu Ember.js eigentlich einfach ist, weil Ember Ihnen einen Großteil der schweren Arbeit abnimmt und gleichzeitig die Code-Organisationsmuster beibehält, an die Entwickler gewöhnt sind.

p>Ember verlässt sich auch auf clientseitige Vorlagen ...

viele. Es verwendet die Vorlagenbibliothek „Lenkers“, die Ausdrücke bereitstellt, mit denen Sie dynamische HTML-basierte Vorlagen erstellen können. Ember-Entwickler können Daten an diese einbettbaren Ausdrücke binden und die Anzeige ihrer Anwendungen dynamisch ändern. Ich kann zum Beispiel eine Vorlage erstellen, die eine Reihe von Personen aufnimmt und sie in einer ungeordneten Liste anzeigt:

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

Beachten Sie, dass der Ausdruck „#each“ als Schleifenanweisung verwendet wird, die jedes Element des Arrays „people“ aufzählt und den Ausdruck „{{name}}“ durch den tatsächlichen Wert ersetzt. Beachten Sie, dass es sich bei handlers um doppelte Klammern handelt, mit denen Ausdrücke gekennzeichnet werden. Dies ist ein kleines Beispiel, auf das wir später näher eingehen.

Handlebars ist eine sehr leistungsstarke clientseitige Template-Engine. Ich empfehle, nicht nur den Ember-Leitfaden, sondern auch die Steering-Website selbst zu lesen, um einen vollständigen Überblick über die verfügbaren Optionen zu erhalten. Sie werden es häufig verwenden.

---

Richten Sie Ember ein

Ember.js ist von anderen Bibliotheken abhängig, daher benötigen Sie eine Kopie von jQuery und Handlers. Aber Moment, habe ich nicht gesagt, dass jQuery und Ember in unterschiedlichen Bereichen funktionieren? Nun ja, das habe ich, aber hier ist die Sache: Das Ember-Team ist bestrebt, das Rad nicht neu zu erfinden. Sie haben sich für jQuery entschieden, um das zu tun, was es am besten kann: mit dem DOM arbeiten. Das ist eine gute Sache, denn jQuery ist darin wirklich gut. Aus diesem Grund haben sie sich für „Lenkers“ entschieden, eine fantastische Vorlagenbibliothek, die zufällig von Yehuda Katz, Mitglied des Ember-Kernteams, geschrieben wurde.

Der einfachste Weg, die benötigten Dateien zu erhalten, besteht darin, das Ember.js-Github-Repository zu besuchen und das Starterkit herunterzuladen. Hier ist ein Beispiel, um Ihnen den Einstieg zu erleichtern. Zum Zeitpunkt des Schreibens enthält es:

• 人类 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' );
});

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

• Route-Objekt: App.EmployeesRoute
• Controller: App.EmployeesController
• Modell: App.Employee
• Ansicht: App.EmployeesView
• Vorlage: Mitarbeiter

Die Verwendung dieser Namenskonvention dient einem doppelten Zweck. Erstens erhalten Sie semantische Beziehungen zwischen ähnlichen Komponenten. Zweitens kann Ember automatisch notwendige Objekte erstellen, die möglicherweise nicht vorhanden sind (z. B. Routenobjekte oder Controller) und sie für die Verwendung in Ihrer Anwendung vernetzen. Das ist die „Magie“, die ich zuvor erwähnt habe. Genau das macht Ember auf globaler Anwendungsebene, wenn Sie ein Anwendungsobjekt instanziieren:

var App = Ember.Application.create();

Diese einzelne Zeile erstellt Standardverweise auf die Router, Controller, Ansichten und Vorlagen der Anwendung.

• Route-Objekt: App.ApplicationRoute
• Controller: App.ApplicationController
• Ansicht: App.ApplicationView
• Vorlage:App

Um auf die Route „Mitarbeiter“ zurückzukommen, die ich oben erstellt habe: Wenn der Benutzer in der Anwendung zu „/Mitarbeiter“ navigiert, sucht Ember nach den folgenden Objekten:

• App.EmployeesRoute
• App.EmployeesController
• MitarbeiterVorlagen

Wenn sie nicht gefunden werden, wird jeweils eine Instanz erstellt, es wird jedoch nichts gerendert, da Sie kein Modell zum Ableiten der Daten oder eine Vorlage zum Anzeigen der Daten angegeben haben. Aus diesem Grund sind Namenskonventionen so wichtig. Dadurch weiß Ember, wie er Aufgaben im Zusammenhang mit einer bestimmten Route erledigen kann, ohne dass Sie eine manuelle Verbindung herstellen müssen.

Bitte beachten Sie, dass ich im ersten Beispiel den singulären Namen „Mitarbeiter“ verwendet habe, um das Modell zu definieren. Das ist Absicht. Aufgrund der Natur des Namens „Mitarbeiter“ kann es sein, dass ich mit null bis vielen Mitarbeitern arbeite. Daher ist es wichtig, ein Modell aufzubauen, das die Flexibilität bietet, einen oder alle Mitarbeiter zurückzugeben. Eine einzige Namenskonvention für das Modell ist für Ember keine Voraussetzung, da die Modelle selbst nicht die Controller kennen, die sie später verwenden werden. Daher können Sie bei der Benennung flexibel sein. Aus Gründen der Konsistenz erleichtert die Einhaltung dieser Konvention jedoch die Verwaltung Ihres Codes.

Außerdem habe ich mich für die Methode resource() entschieden, um meine Routen zu definieren, da ich in diesem Fall höchstwahrscheinlich verschachtelte Routen verwenden würde, um die Detailseite für bestimmte Mitarbeiterinformationen zu verwalten. Wir werden später in dieser Serie auf die Verschachtelung eingehen.

Die wichtigste Erkenntnis ist, dass Ember durch die Verwendung eines konsistenten Benennungsschemas die Verwaltung der Hooks, die diese Komponenten miteinander verbinden, einfach macht, ohne dass die Beziehung explizit durch viel Code definiert werden muss.

Ausführliche Informationen zur Namenskonvention von Ember finden Sie auf der Projektwebsite, die unbedingt gelesen werden muss.

Nächster Schritt: Erstellen Sie die App

---

Im nächsten Teil dieser Serie befassen wir uns mit dem Code, um die Grundlage für unsere Anwendung zu schaffen.

Wir haben die Kernkonzepte von Ember überprüft und wichtige übergeordnete Aspekte des Frameworks besprochen. Im nächsten Teil dieser Serie befassen wir uns mit dem Code, um die Grundlage für unsere Anwendung zu schaffen. In der Zwischenzeit möchte ich Ihnen erneut empfehlen, einen Blick in die Dokumentation zu „Lenkers“ zu werfen, um die Ausdruckssyntax zu verstehen. Wenn Sie es wirklich kaum erwarten können, in Ember einzusteigen, bleiben Sie auf dem Laufenden bei Tuts+ Premium, das bald einen vollständigen Kurs anbieten wird, der Sie durch die Erstellung von Ember-basierten Anwendungen führt!

Wie ich am Anfang dieses Artikels bemerkt habe, haben die Kernteamleiter von Ember.j, Yehuda Katz und Tom Dale, diesen Inhalt auf Richtigkeit überprüft und ihm einen Daumen nach oben gegeben. Team Ember ist zugelassen! Bis bald!

Das obige ist der detaillierte Inhalt vonEntdecken Sie die Welt von Ember.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!