0.1.0 • Published 10 years ago
elmer v0.1.0
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