elmer

Experimental view system for atom. Uses polymer template binding project.

See template-explore for a usage example.

Basic Example

Model:

class TemplateExploreModel
  buttonMessage: 'Clicked'
  buttonClicks: 0
 
  clicked: -> @buttonClicks++

Custom element

{registerElement} = require 'elmer'
 
TemplateExploreModel = require './template-explore-model'
Template = require '../templates/template-explore.html'
 
module.exports =
TemplateExploreElement = registerElement 'template-explore',
  modelConstructor: TemplateExploreModel
  createdCallback: ->
    @appendChild(Template.clone())
    @rootTemplate = @querySelector('template')
    @classList.add 'tool-panel', 'panel-right', 'padded'
 
    @addEventListener 'click', (e) =>
      @model.clicked() if e.target.matches('button')
 
  getModel: -> @model
  setModel: (@model) ->
    @rootTemplate.model = @model

HTML Template:

<template bind="{{}}">
  <div>
    {{ buttonMessage }}
    {{ buttonClicks == 0 ? 'never' : buttonClicks }}
    <button class="btn">Click Me</button>
  </div>
</template>
 

Adding your new model/view as a right panel:

@model = new TemplateExploreModel
@panel = atom.workspace.addRightPanel item: @model