Getting Started

Getting Started

mkdir myproject
cd myproject
npm init (accept defaults)
npm install --save polyfill-webcomponents

Then create an example.js file:

// loads the polymer platform (not the framework though)
require('polyfill-webcomponents')
// this is safe, only loads framework if not already loaded.

// Example

// create an html template
var t = document.createElement('template')

// set content to a ul with repeating li
t.innerHTML = '<ul><template repeat="{{item in items}}"><li>{{item}}</li></template></ul>'

// template needs to have bind attribute
t.setAttribute('bind', '')

// any templates not on dom when load need bindingDelegate set explicitly
t.bindingDelegate = new PolymerExpressions()

// set template model to bind the data
// if template already in DOM, this will trigger a render
t.model = {
  items: ['Item 1', 'Item 2', 'Item 3']
}

// attach template to body to render
document.body.appendChild(t)

Now install beefy to use as a quick dev server. Beefy automatically rebuilds your browserify bundle on change and boots up a http server for you.

npm install --save-dev beefy

Add an "example" script to your package.json like so:

  "scripts": {
    "example": "beefy example.js:bundle.js --open"
  },

then run the example on the commandline:

npm run example

This it should boot up a browser and display the rendered template.