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.js ist kein Framework zum Erstellen traditioneller Websites.

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>

• 人类 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.

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!

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!