Atom的view框架2-SpacePenViews

atom/atom-space-pen-views项目，基于atom-archive/space-pen项目实现了一些常用的View，比如TextEditorView,SelectListView,ScrollView。

这些View用起来很方便，可以很迅速的做出和Atom本身风格一直的对话框等界面。

使用

在package.json中添加依赖：

 "dependencies": {
   "atom-space-pen-views": "^2.1.0",
 }

注意：SpacePenViews已经不再更新，最新版本为2.1.0

TextEditorView

对应文本编辑框。最常用的控件。

{View,TextEditorView} = require "atom-space-pen-views"

module.exports = 
class MyView extends View
  @content: ->
    @div =>
      @div "Type your answer:"
      @subview 'answer', new TextEditorView(mini: true,placeholderText:'hello')

效果如下：

注意：现在在HTML中插入<atom-text-editor>标签就可以直接生成一个编辑框，不需要再使用TextEditorView了

ScrollView

ScrollView只是预定义了一些操作的回调函数，看其源代码就明白了：

module.exports =
class ScrollView extends View
  initialize: ->
    atom.commands.add @element,
      'core:move-up': => @scrollUp()
      'core:move-down': => @scrollDown()
      'core:page-up': => @pageUp()
      'core:page-down': => @pageDown()
      'core:move-to-top': => @scrollToTop()
      'core:move-to-bottom': => @scrollToBottom()

SelectListView

这是很经典的一个空间。fuzzy-finder, command-palette, symbols-view这些插件都是用他实现的。

默认底下会显示所有的选项，通过在输入框中输入关键字，列表会只显示符合的条目。默认就支持模糊搜索，所以用起来非常方便。

要实现图中的选择列表，一下的代码就能实现：

{SelectListView} = require 'atom-space-pen-views'

class MySelectListView extends SelectListView
 initialize: ->
   super
   @addClass('overlay from-top')
   @setItems(['Hello', 'World'])
   @panel ?= atom.workspace.addModalPanel(item: this) 
   @panel.show()
   @focusFilterEditor()

 viewForItem: (item) ->
   "<li>#{item}</li>"

 confirmed: (item) ->
   console.log("#{item} was selected")

 cancelled: ->
   console.log("This view was cancelled")

SelectListView的子类必须实现两个方法：

• ::viewForItem

  SelectListView每次在生成一个条目时，都会调用该函数，并用该函数返回的结果作为条目的view。
  该函数可以放回HTML字符串，DOM元素，jQuery对象，View对象。

  注意：返回的对象的root元素必须是li

• ::confirmed

  当一个条目被选中时，会调用该函数。

以上两个函数传入的参数，都是::setItems设置的条目之一。

SelectListView还有几个有用的函数，大家可以看github页面上的说明。