Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Build Status npm version

done-component

Greenkeeper badge

A StealJS plugin for CanJS components. done-component allows you to easily define your component completely from a single .component file:

Install

npm install done-component --save

Usage

Define a can.Component in a separate file:

hello.component

<can-component tag="hello-world">
	<style type="text/less">
		i {
			color: red;
		}
	</style>
	<template>
		{{#if visible}}<b>{{message}}</b>{{else}}<i>Click me</i>{{/if}}
	</template>
	<script type="view-model">
		export default {
			visible: true,
			message: "Hello There!"
		};
	</script>
	<script type="events">
		export default {
			click: function(){
				this.viewModel.attr("visible", !this.viewModel.attr("visible"))
			}
		};
	</script>
</can-component>

main.stache

In your template simply import your component and you can start using it:

<can-import from="hello-world.component!"/>

<hello-world></hello-world>

API

tag

The tag name is specified on the can-component element. This corresponds to tag when defining a Component in JavaScript.

<can-component tag="foo-bar">

</can-component>

This defines a custom element "foo-bar" when you can use in your templates:

<foo-bar></foo-bar>

leak-scope

The leak-scope attribute is equivalent to setting leakScope: true using can-component directly.

<can-component tag="foo-bar" leak-scope>

</can-component>

Is equivalent to writing:

Component.extend({
	tag: "foo-bar",
	leakScope: true
});

style

The <style> tag lets you include CSS specific to your component. By default it will use the CSS plugin but you can use preprocessors by specifying:

type

The style type lets you use an alternative to CSS such as Less:

<style type="text/less">
  span {
    color: red
  }
</style>

Not that when using Less your style is automatically wrapped with the Component's tag name, so that it is scoped to only your component.

template

The <template> tag is where you put your Stache template.

view-model

The <view-model> or <script type="view-model"> is where you put your viewModel. You can use either method, but the <script> method is more compatible with your editor.

events

The <events> or <script type="events"> is where you put your events object.

helpers

The <helpers> or <script type="helpers"> is where you put Stache helpers.

from

Each of the subtags (style, template, view-model, events, and helpers) can optionally take a from= attribute that allows you to define that in a separate module. It's useful if one part is longer and you want to separate that out into it's own file:

<can-component tag="foo">
  <view-model from="foo/view_model"/>
</can-component>

Exported Object

Your .component will export an object that contains properties for Component which is the can.Component constructor, ViewModel which is a can.Map of your exported ViewModel. This is useful for when testing:

var QUnit = require("steal-qunit");
var HelloVM = require("hello-world.component!").ViewModel;

QUnit.test("view model works", function(){
  var map = new HelloVM();
  ...
});

License

MIT

You can’t perform that action at this time.