翻译进度：已翻译 翻译赏金：10 元 (?) ￥我要打赏

默认原文打印双语对照

如何使用 CanJS 基于 Github Issue 构建一个待办事宜列表

参与翻译：

mylxiaoyi (31),

墨镜大头 (3),

pauli (1)

CanJS 是一个前端库的集合，使得构建复杂的、可维护的 Web 应用程序更容易维护。它分解成几十个独立的包，所以你可以选择你想要的模块，而不是巨大的 100kb+ 依赖。

CanJS 使用 MVVM（模型-视图-视图模型），具有以下主要包模块：

can-component 自定义元素
can-connect 用于与 API 通信
can-define 对于观测值
can-stache 类 Handlebars 模板

译者注：更多内容请访问，https://www.oschina.net/p/canjs

8个月前

在该教程中，我们将会制作一个使用 GitHub 仓库的问题列表作为源的待办事宜列表应用. 多亏了 GitHub’s Webhook API 与 jQuery UI的可排序交互，我们的应用将会实时更新并且能够重排问题顺序.

你可以在 GitHub 找到该应用的最终源代码. 下面是我们最终应用的样子:

Gif of adding issues and sorting them in our example app

如果你对进一步提升你的 JavaScript 技能感兴趣, 注册 SitePoint Premium 并查看我们最新的书籍, 现代 JavaScript

CanJS 中的 MVVM

在我们开始本教程的工程之前，让我们深入了解一下 CanJS 应用中的 MVVM 意味着什么.

8个月前

数据模型

MVVM 中的 “Model” 用于你的数据模型: 你应用中的数据表示. 我们的应用处理单个问题与问题列表，所以这是我们的数据模型中所应有的数据类型.

在 CanJS 中, 我们使用 can-define/list/list 与 can-define/map/map 来分别表示数组与对象. 这些是数据的观察类型，当它们发生变化时，会自动更新 View 或 ViewModel (位于MVVM中) .

例如，我们的应用会有一个类似如下的 Issue 类型:

import DefineMap from 'can-define/map/map';
const Issue = DefineMap.extend('Issue', {
  id: 'number',
  title: 'string',
  sort_position: 'number',
  body: 'string'
});

8个月前

每个 Issue 实例将会有四个属性: id, title, sort_position, 与 body. 当设置一个值时, can-define/map/map 会将该值转换为上面特定的类型，除非该值为 null 或未定义. 例如，将 id 设置为字符串 "1" 将会为 id 属性指定数值 1，然而将其设置为 null 实际上会将其变为 null.

我们将会为问题列表定义一个如下的类型:

import DefineList from 'can-define/list/list';
Issue.List = DefineList.extend('IssueList', {
  '#': Issue
});

can-define/list/list 中的 # 属性会将列表中的任意项转换为指定的类型，所以 Issue.List 中的每一项将会是一个 Issue 实例.

8个月前

视图模板

web 应用中的 “视图” 是用户与其交互的 HTML 用户界面. CanJS 可以使用多个不同的模板语法渲染 HTML , 包括 can-stache, 其类似于 Mustache and Handlebars.

下面是一个 can-stache 模板的简单示例:

<ol>
  {{#each issues}}
    <li>
      {{title}}
    </li>
  {{/each}}
</ol>

在上面的示例中，我们使用 {{#each}} 来迭代问题列表, 然后使用 {{title}} 显示每一个问题的标题. 对问题列表或是问题标题的任何修改都会使得 DOM 被更新 (例如，如果一个新问题被添加到列表中，则会向 DOM 中添加一个 li ).

8个月前

视图模型

MVVM 中的视图模型是模型与视图之间的胶水代码 . 任何不能组合到模型中但对于视图则是必须的逻辑由视图模型来提供.

在 CanJS 中, can-stache 模板由视图模型来渲染. 下面是一个简单的示例:

import stache from 'can-stache';
const renderer = stache('{{greeting}} world');
const viewModel = {greeting: 'Hello'};
const fragment = renderer(viewModel);
console.log(fragment.textContent);// Logs “Hello world”

组件

组件的概念是将所有这些内容连接在一起 (或自定义元素). 组件对于将功能组合在一起并使其在我们的整个应用中重用非常有用.

8个月前

在 CanJS 中, 一个 can-component 由视图 (can-stache 文件), 视图模型 (can-define/map/map), 以及 (可选) 监听 JavaScript 事件的对象组成.

import Component from 'can-component';
import DefineMap from 'can-define/map/map';
import stache from 'can-stache';

const HelloWorldViewModel = DefineMap.extend('HelloWorldVM', {
  greeting: {value: 'Hello'},
  showExclamation: {value: true}
});

Component.extend({
  tag: 'hello-world',
  view: stache('{{greeting}} world{{#if showExclamation}}!{{/if}}'),
  ViewModel: HelloWorldViewModel,
  events: {
    '{element} click': () => {
      this.viewModel.showExclamation = !this.viewModel.showExclamation;
    }
  }
});

const template = stache('hello-world');
document.body.appendChild(template);

8个月前

在上面的示例中，依据用户是否点击我们的自定义元素，我们的模板将会显示 “Hello world!” 或者仅是 “Hello world” (没有感叹号).

所有这四个概念是你构建一个 CanJS 应用需要了解的内容! 我们的示例应用将会使用这四个概念来构建一个完全成熟的 MVVM .

教程的先决条件

在开始之前，安装最新版本的 Node.js. 我们将会使用 npm 来安装将处理与 GitHub 的 API 通信的后端服务器.

另外, 如果你还没有 GitHub 帐户, 注册一个.

8个月前

设置本地工程

让我们首先为我们的工程创建一个新目录并切换到该新目录:

mkdir canjs-github
cd canjs-github

现在让我们创建我们工程所需要的文件:

touch app.css app.js index.html

我们会将 app.css 用于我们的风格, app.js 用于我们的 JavaScript, 以及 index.html 用于我们的用户界面 (UI).

CanJS Hello World

让我们编码吧! 首先，我们会将下面代码添加到我们的 index.html 文件中:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CanJS GitHub Issues To-Do List</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
</head>
<body>

<script type="text/stache" id="app-template">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h1 class="page-header text-center">
          {{pageTitle}}
        </h1>
      </div>
    </div>
  </div>
</script>

<script type="text/stache" id="github-issues-template">
</script>

<script src="https://unpkg.com/jquery@3/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/can@3/dist/global/can.all.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="app.js"></script>
</body>
</html>

8个月前

这有一系列不同的组成部分，让我们将其分解:

头部的两个 link 元素是我们工程的样式表. 我们使用 Bootstrap 作为基本风格并且我们还会在 app.css 中的一些自定义风格
第一个 script 元素 (id="app-template") 包含我们应用的根模板
第二 script 元素 (id="github-issues-template") 将包含我们稍后在本教程中创建的 github-issues 组件的模板
页面底部的 script 元素载入我们的依赖: jQuery, jQuery UI, CanJS, Socket.io, 以及我们应用的代码

8个月前

在我们的应用中, 我们将使用 jQuery UI (依赖于 jQuery) 通过拖放来排序问题. 我们已经包含了can.all.js 从而我们可以访问所有 CanJS module; 通常, 你希望使用模块装载器例如 StealJS 或 webpack, 但是这超出了本文的范围. 我们将使用 Socket.io 由 GitHub 接收事件来实时更新我们的应用.

接下来，让我们向我们的 our app.css 文件中添加一些样式:

form {
  margin: 1em 0 2em 0;
}

.list-group .drag-background {
  background-color: #dff0d8;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

8个月前

最后，让我们向 app.js 文件中添加一些代码:

var AppViewModel = can.DefineMap.extend('AppVM', {
  pageTitle: {
    type: "string",
    value: "GitHub Issues",
  }
});

var appVM = new AppViewModel();
var template = can.stache.from('app-template');
var appFragment = template(appVM);
document.body.appendChild(appFragment);

让我们分解 JavaScript:

can.DefineMap 用于声明自定义的可观察对象类型
AppViewModel 是可观察对象类型，将作为我们应用的根视图模型
pageTitle 是所有 AppViewModel 实例的属性，默认为 GitHub Issues 的值
appVM 是我们应用的视图模型的新实例
can.stache.from 将 script 标记的内容转换为渲染模板的函数
appFragment 是使用 appVM 数据所渲染模板的文档片段
document.body.appendChild 获取 DOM 节点并将其添加到 HTML 体中

8个月前

注意:我们页面中的 can.all.js 脚本提供了一个全局变量，我们可以用其来访问任意的 CanJS 模块. 例如, can-stache 模块可以通过 can.stache 来使用.

如果你在浏览器中打开 index.html , 你将会看到类似下面的页面:

Screenshot of our example app with an error loading Socket.IO

在控制台中有一个错误，这是因为我们还没有设置实时 Socket.io 服务器. 让我们马上来设置。

设置我们的服务器

GitHub 的 Webhooks API 会在仓库内发生变化时发送服务器通知. 无需花费时间编写服务器代码, 我已经实现了 github-issue-server npm 模块，该模块将会:

CanJS 中的 MVVM

数据模型

视图模板

视图模型

组件

教程的先决条件

设置本地工程

CanJS Hello World

设置我们的服务器

创建 GitHub 问题组件

设置 GitHub 仓库

列出 GitHub 问题

创建 GitHub 问题

添加实时更新

重新排序问题

进一步阅读

金额：N/A元

相关文章

文章评论

可译网

可译计划

可译网 —— 翻译可以更简单