README
done-component
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