如何使用CANJS构建实时github问题待办事项清单

>本教程演示了使用CANJS构建实时待办事项列表应用程序，利用Github的问题列表和Webhook API进行动态更新。 该应用程序显示CANJS的MVVM架构及其关键软件包：can-component，can-connect，can-define和can-stache。 jQuery UI可以通过拖放重新排序增强交互性。

关键特征和学习成果：

>

• >实时github集成：该应用程序会随着github问题的变化而动态更新，这要归功于webhook api。
• MVVM体系结构：了解canjs的核心软件包如何促进模型 - 视图 - 视图模型开发。
• > canjs组件：构建和利用自定义CANJS组件，以实现模块化和可重复性。>
数据绑定：
• 实现无缝数据流的单向和双向数据绑定。
>拖放重新排序：
• >使用jQuery UI启用交互式问题，并通过服务器持续更改。 >>本地服务器设置（node.js）：
>配置本地服务器以管理数据持久性和webhook事件。
• canjs和mvvm模式：
>

canjs采用MVVM（模型视图 - 视图模型）体系结构。让我们检查一下其组件：

>

数据模型（

）：

应用程序模型单个问题和使用

（用于对象）和
• 的问题列表（用于数组）。这些都是可观察的，可以自动更新更改的视图。 示例模型：can-define can-define/map/map can-define/list/list Issue
查看模板（

）：import DefineMap from 'can-define/map/map'; const Issue = DefineMap.extend('Issue', { id: 'number', title: 'string', sort_position: 'number', body: 'string' });，类似车把的模板引擎，以渲染HTML UI。 示例：

• can-stache can-stache
查看模型：模板用ViewModel渲染。

<code class="language-html"><ol>
  {{#each issues}}
    <li>{{title}}</li>
  {{/each}}
</ol></code>

>

• >组件（）：can-stache

  组件封装视图，viewModel和事件处理，促进代码可重复使用。

• 项目设置：can-component

  1. 创建一个项目目录和文件（index.html>，app.css，app.js）。
  >
  2. 包括必要的库（jQuery，jQuery UI，Canjs，socket.io） index.html样式使用
  的应用程序（建议使用bootstrap）。
  3. > app.css>使用
  设置本地服务器（需要node.js和npm）。 这将处理GitHub Webhook事件和数据持久性。 获取用于身份验证的github个人访问令牌。
  4. github-issue-server
  >逐步开发：
  >
  基本CANJS设置：
  1. 创建一个简单的“ Hello World” Canjs应用程序，以熟悉框架。
  github问题组件：
  2. 开发一个自定义canjs component（）以显示和管理github问题。 github-issues
  github存储库配置：
  3. 配置github存储库，并设置一个网络钩以将事件发送到您的本地服务器。> 提取问题：
  >使用
  4. 从github存储库中获取和显示问题。 >can-connect创建问题：
  添加表单以创建新问题，并通过API发送将其发送到GitHub。
  5. 实时更新（socket.io）：
  Integrate socket.io以从GitHub处理实时更新。
  6. >拖放重新排序：
  使用jquery ui的
  7. 方法实现拖放功能。 sortable完整的源代码可在GitHub上获得（原始文章中提供的链接）。 教程以常见问题解答部分结束，涉及有关CANJ和GitHub集成的常见问题。

以上是如何使用CANJS构建实时github问题待办事项清单的详细内容。更多信息请关注PHP中文网其他相关文章！