SproutCore入门教程 - 第一部分

本文为翻译文章：

译者：Jacky <jacky@iajax.net>

译者博客：http://blog.youkuaiyun.com/varkychan

原文：http://guides.sproutcore.com/getting_started.html

 

译者前言：由于国内关于SproutCore的中文资源比较少，所以我开始尝试翻译官方网站的相关教程及指南，因为本人英文水平真的一般，语文水平也不咋的，所以在译文可能表达得不清晰，甚至是误译的可能，所以发现问题，请不啬向我指点，吾将非常感激！

SproutCore入门教程 - 第一部分

入门

读完本章后，你将能够:

• 使用SproutCore的模板描绘你的应用界面
• 委托处理视图（view）用户事件
• 当模型（models）发生改变时通过绑定（bindings）更新视图（views）

 

通过使用SproutCore从头开始创建一个真实的“代办事项（Todo list）”应用程序，你将学到所有这些内容。

1 跟随

你可以在Github上看到这个应用程序最后完成的源代码。要看运行的效果，点击这里。

这里还有一个截屏视频放在Vimeo上。 

 

2 安装SproutCore

这个指南假设你已经安装了SproutCore。如果你还没安装，请现在安装它。

 

这份指南需要安装SproutCore 1.6.0 beta版。安装程序在Windows和Mac上都有提供，如果你通过RubyGems来安装，就需要使用 gem install sproutcore --pre 来安装beta版本。

 

3 创建新应用

首先，通过如下命令生成一个基于HTML的新应用。 

 

$ sc-init todos --template

 

这里会创建几个应用程序需要用到的文件，放在 apps/todods 文件夹内。

• apps/

•  
  • todos/
    • todos.js – 在这里定义model,view及controller.
    • resources/
      • templates/ – 将所有的Handlebars模板放在这里.
        • todos.handlebars – 应用程序的主模板.
      • images/ – 图片文件放在这里.
      • stylesheets/ – 样式（CSS）文件放在这里.
        • todos.css – 应用程序的主样式文件.
    • tests/

• Buildfile – 告诉SproutCore如何创建你的应用程序. 通常, 你只要使用默认提供的即可.
• README – 对项目的说明.

 

现在打开todos.js文件. 你将会看到如下代码:

apps/todos/todos.js

Todos = SC.Application.create();

 

SC.ready(function() {

  Todos.mainPane = SC.TemplatePane.append({

    layerId: "todos",

    templateName: "todos"

  });

});

 

代码中为你的应用程序创建了一个命名空间Todos，然后增加一个新的pane模板。pane负责事件委派和把模板放到DOM中，你会在后面的内容中了解到更多关于这些方面的内容。

 

如果你向sc-init传递一个驼峰式的名字，如ToDos（注意这里的大写字母D），这时命名空间是ToDos，而文件夹的名称则是将命名空间进行下划线分隔，如apps/to_dos。

 

4 定义模型（model）

在这个教程中，我们要创建一个列表，用于管理代办事项（todos)。用户能够创建某个任务的新代表事项，然后在任务完成后可以剔除它。

首先让我们定义一个model，它是由SC.Object派生出来的新子类：

apps/todos/todos.js

Todos = SC.Application.create();

 

Todos.Todo = SC.Object.extend({

  title: null,

  isDone: false

});

 

SC.ready(function() {

  Todos.mainPane = SC.TemplatePane.append({

    layerId: 'todos',

    templateName: 'todos'

  });

});

 

请在建立Todos对象的代码下面插入新代码。

现在我们已经定义了一个具有两个属性的类，这两个属性分别是：title：字符串类型;isDone：布尔类型。

5 使用Controller管理Model

现在我们知道我们的数据是怎样的了，然后我们创建一个controller来管理它。因为我们想要管理一个有序的代办事项列表，因此我们将使用SC.ArrayController来实现它。 

in apps/todos/todos.js

// 在文件未尾加入以下代码

 

Todos.todoListController = SC.ArrayController.create({

  // 以一个空数组初始化数组控制器.

  content: []

});

 

在像 SproutCore 这样的MVC框架中，controller层是作为模型(model)层（只与表示数据的对象相关）和视图(view)层（