A lightweight Web components and MVVM framework. Zect's state observer is power by muxjs
- Todo MVC: http://zectjs.github.io/zect-todo
- Production:
<script src="dist/zect.js"></script>
<!-- mounted element -->
<div id="app">
<span>{title}</span>
<input type="text" z-model="title">
</div>Define and instance
var app = new Zect({
el: '#app',
data: function () {
return {
title: 'Hello, Zect'
}
}
})-
Global API
-
Instance Options
-
Lifecyle Methods
-
Instance Methods
-
Instance Properties
-
Template Syntax
-
Direcitves
Options's Methods:
- bind Call only once when directive is binding.
- update Call every time when expression's value has been changed.
- unbind Call only once when directive is unbinded.
Directive instance properties:
- $vm Mounted VM of the directive
- $el Mounted target Node of the directive
- $id Current directive instance id
- $scope Repeat directive will create a scope for each item when compiling, so your can access "$index", "$value" through "$scope".
Example below:
<div z-tap="{onClick}"></div>Zect.directive('tap', {
bind: function (result, expression) {
// do something when init
},
update: function (result) {
// do something when state change or after init
},
unbind: function () {
// do something before destroy the directive instance
}
})<div id="con">
<input type="text" z-model="search" />
<input type="submit" z-on="{onSubmit}" value="submit">
</div>new Zect({
el: '#con',
data: {
search: 'Please input'
},
methods: {
onSubmit: function () {
this.$data.search // input-value
}
}
})Filters actually are function call using in template's expression.
<ul id="con">
<z-repeat items="{lessThanFour(items)}">
<li data-index="{$index}">{$value}</li>
</z-repeat>
</ul>new Zect({
el: '#con',
data: function () {
return [1,2,3,4,5]
},
methods: {
lessThanFour: function (items) {
return items.filter(function (item) {
if (item < 4) return true
})
}
}
})- Render result:
<ul id="con">
<li data-index="0">1</li>
<li data-index="1">2</li>
<li data-index="2">3</li>
</ul>- Content Render:
<!-- escaped HTML value -->
<p>{title}</p>
<!-- unescaped HTML value -->
<p>{- title}</p>- Javascript Syntax In Expression:
<!-- escaped HTML value -->
<p>{'Current time is: ' + new Date()}</p>
<!-- unescaped HTML value -->
<p>{- 'Current Page: ' + page}</p>- Condition Statements:
"is"is a keyword-attribute for the "if" directive. If value is truly, the template that is included by "if" directive element will be compiled and insert into to parent's DOM tree. Otherwise template will be removed from parent's DOM tree.
<!-- if -->
<z-if is="{title}">
<div>{title}</div>
</z-if>- Array Iterator:
"items"is a keyword-attribute for the "repeat" directive. The value of items's expression should be an Array object.
<!-- repeat -->
<z-repeat items="{items}">
<div data-row="{$index}">{- $value}</div>
</z-repeat>Zect support reusable component that are conceptually similar to Web Components.
- define:
<script type="text/zect" id="tpl-header">
<z-template class="header">
<div class="title">{title}</div>
</z-template>
</script>Zect.component('c-header', {
template: document.querySelector('#tpl-header').innerHTML,
data: {
title: 'index'
},
ready: function () {
}
})- use:
<body>
<div id="app">
<c-header title="header of page"></c-header>
<div title="another header" z-component="c-header" class="another"></div>
</div>
<script>
new Zect({
el: '#app'
})
</script>
</body>- render result:
<div id="app">
<c-header title="header of page" class="header">
<div class="title">index</div>
</c-header>
<div title="another header" class="header another">
<div class="title">index</div>
</div>
</div>Zect will copy all attributes for "template" element to instance component element.
Component's HTML template:
<script type="text/zect" id="tpl-header">
<z-template class="c-header" data-title="{title}">
<button>Back</button>
<div>{title}</div>
</z-template>
</script>Define component:
Zect.component('c-header', {
template: document.querySelector('#tpl-header').innerHTML
})- data
"data" property is used to declare binding data from the parent ViewModel.
Just like your instance a component and pass data option. When those binding variables of expression change,
Zectwill be re-excute the expression and call component instance's "$set" method automatically for updating child component.
Notice: r-data has multiple keys must using ';' as separator, otherwise can't create binding for each keys.
<div id="app">
<my-component
z-data="{
title: 'child ' + title;
content: content;
}"
>
</my-component>
</div>- methods Just like your instance a component and pass method option. Methods only set once, so when those binding variables of expression change, it will do nothing.
<div id="app">
<my-component
z-methods="{
onClick: onClickItem;
onTouchstar: onTouchItem;
}"
></my-component>
</div>- ref This option is used to save ref to parent ViewModel, so that access it's instance with the specified name by "$refs".
<div id="app">
<my-component z-ref="header"></my-component>
</div>this.$refs.header // access child component instance.- replace This option is uesed to reduce one level document structure. if attribute value equal "true", will replace component's element with it's main child element.
Component template:
<div class="header" data-title="header">
<h1>Header</h1>
</div>Usage:
<div id="app">
<my-component z-replace="true" class="app-header"></my-component>
</div>Render result:
<div id="app">
<div class="app-header header" data-title="header">
<h1>Header</h1>
</div>
</div>For those complicated logic, you should use computed properties to replace inline expressions.
var demo = new Zect({
data: {
host: 'https://github.com',
user: 'switer',
repos: 'zect'
},
computed: {
link: {
// property dependencies of getter
deps: ['host', 'user', 'repos'],
// property getter
get: function () {
var $data = this.$data
return [$data.host, $data.user, $data.repos].join('/') // https://github.com/switer/zect
},
// setter is optional
set: function (link) {
// input: https://github.com/zectjs/zect.github.io
var $data = this.$data
var parts = link.replace(/\/$/, '').split('\/')
$data.repos = parts.pop()
$data.user = parts.pop()
$data.host = parts.join('/')
}
}
}
})- Display List
Use z-repeat block element to repeat display template.
<div id="list">
<ul>
<z-repeat items="{items}">
<li>{$value}</li>
</z-repeat>
</ul>
</div>new Zect({
data: {
items: ["Switer", "Zect", "Xiaokai"]
}
})Result:
* Switer
* Zect
* Xiaokai
- Append More
vm.$data.items.$concat(['Web Component'])Will delta update:
* Switer
* Zect
* Xiaokai
+ Web Component
- Append Before
vm.$data.items.splice(0, 0, 'Web Component', 'MVVM')Result:
+ Web Component
+ MVVM
* Switer
* Zect
* Xiaokai
- Remove
vm.$data.items.splice(1, 1)Result:
+ Web Component
- MVVM
* Switer
* Zect
* Xiaokai
- Push
vm.$data.items.push('Web Component')Result:
* Switer
* Zect
* Xiaokai
+ Web Component
and shift, unshift, sort, reverse, pop. shift, unshift, pop whill be Update in delta (includes splice and concat).
MIT