点燃圣火！Ember.js的初学者指南

 
 
 

  
  
  
Songs = Ember.Application.create({ mixmaster: 'Andy' });
 
 
 

 
 
 

  
  
  
Songs = Ember.Application.create({ mixmaster: 'Andy', totalReviews: 0, ready: function(){ alert('Ember sings helloooooooooo!'); } });
 
 
 

 
 
 

  
  
  
Songs.Song = Ember.Object.extend({ title: null, artist: null, genre: null, listens: 0 });
 
 
 

 
 
 

  
  
  
mySong = Song.create({ title: 'Son of the Morning', artist: 'Oh, Sleeper', genre: 'Screamo' });
 
 
 

 
 
 

  
  
  
 Hello {{Songs.mixmaster}} 
 
 
 

 
 
 

  
  
  
Hello Andy
 
 
 

 
 
 

  
  
  
  Andy  
 
 
 

 
 
 

  
  
  
Songs.ReviewTextArea = Ember.TextArea.extend({ placeholder: 'Enter your review' });
 
 
 

 
 
 

  
  
  
 {{view Songs.ReviewTextArea}} 
 
 
 

 
 
 

  
  
  
 My songs have {{Songs.totalReviews}} reviews. 
 
 
 

 
 
 

  
  
  
My songs have 0 reviews.
 
 
 

 
 
 

  
  
  
 {{#if Songs.totalReviews}} Read all my reviews! {{else}} There are no reviews right now. {{/if}} 
 
 
 

 
 
 

  
  
  
Songs.songsController = Ember.ArrayController.create({ content: [], init: function(){ // create an instance of the Song model var song = Songs.Song.create({ title: 'Son of the Morning', artist: 'Oh, Sleeper', genre: 'Screamo' }); this.pushObject(song); } });
 
 
 

 
 
 

  
  
  
 {{#each Songs.songsController}} 
{{title}}
 
{{artist}} - {{genre}}
 {{/each}} 
 
 
 

 
 
 

  
  
  
Son of the Morning
 
Oh, Sleeper - Screamo
 
 
 

 
 
 

  
  
  
 
  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  
 Load Tweets for:  

您可以看到这个应用程序有三个部分： 一个输入字段，允许用户输入一个 Twitter 用户名；时间轴查看器，显示所选 Twitter 用户的 tweet；以及最新的用户列表，它将存储以前的搜索。

搜索框将出现在页面顶部，最新的用户在左侧的栏中，而 tweet 本身将占据页面右侧的绝大部分版面。

下一步，创建名为 app.js 的另一个文件，并添加以下内容。 这些注释可以帮助您保持代码的条理性。 在您的浏览器中加载此页面，并确保没有任何错误。

 
 
 

  
  
  
/************************** * Application **************************/
  
  
  
/************************** * Models **************************/
  
  
  
/************************** * Views **************************/
  
  
  
/************************** * Controllers **************************/
 
 
 

请注意，此行使用的不是 Ember.Application，而是 Em.Application。在可能要使用 "Em" 任何地方，您都可以使用 "Ember"，Ember 团队通过加入这个方便的快捷方式，减少了要输入的字数。

接下来，您将添加 TextInput 视图和提交按钮。 直接在标记为 "Views" 的注释块下面，放入以下代码：

 
 
 

  
  
  
App = Em.Application.create();
 
 
 

请注意，此行使用的不是 Ember.Application，而是 Em.Application。在可能要使用 "Em" 任何地方，您都可以使用 "Ember"，Ember 团队通过加入这个方便的快捷方式，减少了要输入的字数。

接下来，您将添加 TextInput 视图和提交按钮。 直接在标记为 "Views" 的注释块下面，放入以下代码：

 
 
 

  
  
  
App.SearchTextField = Em.TextField.extend({ insertNewline: function(){ App.tweetsController.loadTweets(); } });
 
 
 

 此块从使用 App 名称空间开始，然后扩展 Ember 的其中一个预打包的视图 TextField。 除了在 Views 内允许任意属性和函数之外，Ember 也提供了内置的辅助函数。 那就是 insertNewLine() 函数；每当光标在输入框中，并且用户在键盘上按 Enter/Return 键时，就会执行该函数。

创建模板块

现在已定义了 TextField View，您将要添加相应的视图辅助代码到 HTML 文件中。 切换到 index.html 并在显示为 "Load Tweets for" 的行后面直接添加以下代码。 请记住， {{ 和 }} 内的任何代码都是模板，并且将被 Ember 用于输出数据。 此外，任何以单词 view 开始的模板指的都是已经在您的 JavaScript 代码中定义过的视图。

 
 
 

  
  
  
{{view App.SearchTextField placeholder="Twitter username" valueBinding="App.tweetsController.username"}} Go!
 
 
 

这部分的模板包含一个视图辅助程序，以及一个带有 {{action}} 辅助程序的按钮标记。 TextField View SearchTextField 以占位符文本开始，占位符文本是内置在 HTML5 文本输入字段中的一个属性。 如果该字段为空， placeholder 属性中的文本将被放进输入字段。 当有人开始输入时，该值将消失。 Ember 使开发人员可以在其内置视图内使用任何 HTML 5 标准属性。

第二个属性突出显示 Ember 数据绑定的能力。 Ember 使用一组约定来帮助它确定您想完成什么。 视图（一个模板或一个 JavaScript 文件中的视图）中以单词 "Binding" （注意大写字母）结尾的任何属性，自动为它前面的属性设置绑定。 在本例中，Ember 将 App.tweetsController.username 的值绑定到输入字段的 value 属性。 每当变量的内容发生变化，输入字段中的值将自动更新，反之亦然。

{{action}} 使得更易于将功能添加到输入驱动的元素。 它有两个选项： 操作名称和目标。 两者综合起来，形成一个 "路径" ，指向 Ember 对象中所包含的函数。 在上面按钮的示例中， "路径" 将是 App.tweetsController.loadTweets() ，当用户在文本字段内按 Enter 键时，也会调用相同的函数。 在您的浏览器中加载 index.html，并单击提交按钮，或在输入字段内按 Enter 键。 如果您查看浏览器控制台，您就会看到一个错误。 这是因为还没有定义 App.tweetsController 。

准备 Tweet 存储对象

现在是定义 App.tweetsController 的好时机。 在 app.js 中的 Controllers 注释块后面添加以下代码。您应该已经熟悉以下代码。 名称空间、ArrayController、内容数组 —— 一切都在。 但这次您将会添加一个任意属性 ( username ) 和一个函数 ( loadTweets )。 在添加 ArrayController 之后，重新加载您的浏览器。 在输入框中输入一个单词，然后单击按钮。 您会得到一个提示框，回显您所键入的单词。 您可以随时删除提示行。 您还将看到一个错误，表明尚未定义 addUser 方法。

 
 
 

  
  
  
App.tweetsController = Em.ArrayController.create({ c
  
  
  
ontent: [], username: '', loadTweets: function() {
  
  
  
var me = this; var username = me.get("username");
  
  
  
alert(username);
  
  
  
if ( username ) {
  
  
  
var url = 'http://api.twitter.com/1/statuses/user_timeline.json' url += '?screen_name=%@&callback=?'.fmt(me.get("username"));
  
  
  
// push username to recent user array App.recentUsersController.addUser(username);
  
  
  
} } });
 
 
 

仔细看看 loadTweets 函数的定义；它有一些陌生的代码。 第一行为函数的其余部分设置一个 范围 。 根据定义，范围或 this 对于所有 Ember 对象来说都是当前函数，在本例中是 App.tweetsController 。 但是，在本教程中，稍后您可以将更多功能添加到 loadTweets 函数。 现在设置当前范围，有助于 Ember 理解您正在使用的上下文。

如前所述，Ember 提供了许多辅助函数，使编写应用程序变得更容易，这些函数包括 get() 和 set() 。 这两个函数内置在每个 Ember 对象中，并提供对任何属性或函数的快速访问。 下一行使用当前对象 App.tweetsController 的范围，然后调用 get() 函数，将您希望获取其值的属性的名称传递进去。 您可能会好奇，在开始时要使用的用户名的值从哪里来。 请记住，Ember 的数据绑定是双向的。 这意味着，一旦您在输入字段中键入了一个值，该输入字段视图的 valueBinding 属性就会用一个值更新 App.tweetsController 对象。

检索到用户名后，会运行一个测试，以确保它不是空的。 此时 if 块内只有两个语句，但这在以后会更改。 第一个语句为一个用户将 URL 设置到 Twitter 的 JSON 文件。 您可能没有马上注意到这里有什么特殊之处，但仔细再看看，您就会发现末尾的 %@ 和 .fmt() 。 .fmt() 函数执行一个方便的字符串替换，使用 %@ 作为标记。 由于应用程序的设计要求存储搜索列表，因此您必须以某种方式存储您的搜索字词。 最后一行执行该函数，将用户名的值推送到 App.recentUsersController ArrayController。 因为该对象尚未存在，所以运行代码将产生一个错误。

#p#

存储之前的搜索

在下面这一节中，您将创建用于存储最近搜索的对象。 使用以下代码并将它添加到 App.tweetsController 对象后面。

 
 
 

  
  
  
App.recentUsersController = Em.ArrayController.create({
  
  
  
content: [], addUser: function(name) {
  
  
  
if ( this.contains(name) )
  
  
  
this.removeObject(name);
  
  
  
 this.pushObject(name); }, removeUser: function(view)
  
  
  
{ this.removeObject(view.context); }, searchAgain:
  
  
  
 function(view){ App.tweetsController.set('username', view.context); App.tweetsController.loadTweets(); },
  
  
  
 reverse: function(){ return this.toArray().reverse(); }.property('@each') });
 
 
 

您已经熟悉了如何创建 ArrayController 和添加一个空的内容数组，但该对象有一些新的元素，它们以 addUser 函数开始。 这将使用名称为 contains() 的内置 Ember 函数检查现有数组 ( this )。 如果它找到一个结果，它会使用 ArrayController 的函数 removeObject() 删除该结果。 与该函数相反，有一个名为 pushObject() 的函数，它用于将单独的对象添加到内容数组。 这两个函数都有处理多个对象的复数版本： pushObjects() 和 removeObjects() 。 此代码在添加搜索词之前首先删除现有搜索词，那么相同的搜索词就不会被多次显示。 既然您已经知道如何从内容数组中删除一个对象， removeUser() 函数中唯一的新元素就是参数。 当使用 {{action}} 辅助程序调用一个函数时，Ember 隐式传递一个引用给当前视图。 在 App.tweetsController 的示例中，视图有一个上下文，这基本上是当前被遍历的项。 该上下文用于从数组中删除选定的项。

searchAgain() 函数也将当前视图接收为一个参数。 当用户单击之前搜索过的字词，该函数会用选定的用户名填充 App.tweetsController.username ，然后触发 loadTweets() 函数，为前面的搜索提供一个单击视图。

默认情况下，Ember 按升序将内容显示到页面。 数组索引 1 是第一个，数组索引 2 是第二个，依次类推。 此应用程序的设计要求按降序显示最近的搜索。 这意味着该数组必须被逆转。 虽然这不是内置函数，但您可以看到要添加它是多么容易。 Reverse() 首先使用 Ember toArray() 函数将 Ember 内容数组转换成一个普通的数组，逆转它，然后返回它。 使得该函数可以被用作一个数据源的，是在末尾添加的 property() 函数。 property() 函数使用一个指定函数所要求的以逗号分隔的属性列表。 在本例中， property() 函数隐式地使用内容数组本身，使用 @each 依赖键对该数组内每个元素进行寻址。 在下一节中，您将看到如何实施 reverse() 函数。

显示之前的搜索

现在，您已存储了之前的搜索，是时候将它们显示在页面上。 复制以下模板，并将它添加到标签为 Recent Users 的 h3 标记后面。

 
 
 

  
  
  
 {{#each App.recentUsersController.reverse}} 
 {{this}} - X 
 {{/each}} 
 
 
 

现在，您应该已经熟悉所有这些代码。 each 块指向内容数组，它内部所包含的 HTML 将被应用到 App.recentUsersController 变量中的每一项。 不必显式指向内容数组，但在本例中，该代码指向 reverse 函数，它以反序提供数据。 {{action}} 辅助程序让用户单击每个锚标记，并触发指定的函数。 可能不太熟悉的唯一一个元素是 {{this}} 。 当遍历内容数组时，Ember 在 {{this}} 变量中保存对当前索引的引用。 因为每一项的值都只是一个字符串，您可以使用 {{this}} 直接输出当前项的值。 单击 Twitter 用户名，将再次加载该用户的 tweet，而单击这些 tweet 的名称则将从 recentUsersController 删除它们。

加载 tweet

保存搜索词没问题了，但实际执行搜索又如何呢？ 接下来，您将添加从 Twitter 检索 JSON 包的片段，并将它显示到页面。 使用以下 Ember Model 并直接将它添加到标签为 Model 的注释块后面。 请记住，Ember Model 是它们将包含的数据是一个蓝图。

 
 
 

  
  
  
App.Tweet = Em.Object.extend({ avatar: null, screen_name: null, text: null, date: null });
 
 
 

在 app.js 中，找到显示为 App.recentUsersController.addUser(username); 的代码行；并在它后面直接添加以下代码：

 
 
 

  
  
  
$.getJSON(url,function(data){ me.set('content', []); $(data).each(function(index,value){ var t = App.Tweet.create({ avatar: value.user.profile_image_url, screen_name: value.user.screen_name, text: value.text, date: value.created_at }); me.pushObject(t); }) });
 
 
 

如果您以前使用过 jQuery，您可能已经使用过 .get() 函数来检索数据。 .getJSON() 函数做同样的事情，只是它将 JSON 包视作一个结果。 此外，它使用返回的 JSON 字符串，并将它转换成可执行的 JavaScript 代码。 数据被检索到之后，内容数组被清空，删除所有现有的 tweet。 下一行提取数据包，并将它封装在一个 jQuery 对象中，因此 .each() 方法可以循环所生成的 Tweets。 在 each 块中，使用数据填充了 Tweet Model 的一个副本，然后将其推送到 ArrayController。

最后，您需要将以下显示代码添加到 index.html。直接复制并粘贴它到标签为 Tweets 的 h3 标记后面。

 
 
 

  
  
  
 {{#each App.tweetsController}} 
  {{date}} 
{{screen_name}}
 
{{text}}
 
 {{/each}} 
 
 
 

Ember 使用纯 {{Handlebars}} 可以很容易地输出数据到页面，但有一个问题。 还记得 Ember 如何在脚本标记中包装输出的值吗？ 当您使用 HTML 属性时，这并不是一个选项。 所以 Ember 提供 {{bindAttr}} 辅助程序。 在这个辅助程序内放置的任何属性都将如常输出，但仍保留绑定。 继续进行操作，现在运行您的应用程序。 输入一个用户名，会看到 Tweets 出现。

下一步阅读方向

在本文中，您学习了 Ember.js 功能的基础知识。 您也学习了 Ember 如何使用其Models、Views、Controllers，当然还有 Application 对象实施 MVC。 您使用 Handlebars 通过视图辅助程序和操作辅助程序创建了模板。 您学习了如何使用 Models 创建数据的蓝图，使用 Controllers 将该数据存储在集合集，并使用 Views 将数据显示到页面。 最后，您使用了 Ember 来构建一个具有数据绑定、计算属性和自动更新模板的完整应用程序。 您的母亲将为您感到自豪！

本文题目：点燃圣火！Ember.js的初学者指南
转载注明：http://www.mswzjz.com/qtweb/news28/166428.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联