Zect , component & mvvm
A lightweight Web components and MVVM framework. Zect's state observer is power by muxjs
Examples
- Todo MVC: http://zectjs.github.io/zect-todo
- Production:
Downloads
Usage
<!-- mounted element --> {title}
Define and instance
var app = el: '#app' { return title: 'Hello, Zect' }
API Reference
-
Global API
-
Instance Options
-
Lifecyle Methods
-
Instance Methods
-
Instance Properties
-
Template Syntax
-
Direcitves
Guide
Custom directive
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:
Zect
Two way binding
el: '#con' data: search: 'Please input' methods: { this$datasearch // input-value }
Filter Expression
Filters actually are function call using in template's expression.
{$value}
el: '#con' { return 12345 } methods: { return items }
- Render result:
1 2 3
Template syntax
- Content Render:
<!-- escaped HTML value -->{title} <!-- unescaped HTML value -->{- title}
- Javascript Syntax In Expression:
<!-- escaped HTML value -->{'Current time is: ' + new Date()} <!-- unescaped HTML value -->{- 'Current Page: ' + page}
- 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 --> {title}
- Array Iterator:
"items"
is a keyword-attribute for the "repeat" directive. The value of items's expression should be an Array object.
<!-- repeat --> {- $value}
Reusable Component
Zect support reusable component that are conceptually similar to Web Components.
- define:
Zect
- use:
- render result:
index index
Component Template
Zect will copy all attributes for "template" element to instance component element.
Component's HTML template:
Define component:
Zect
Component Attributes
- 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,
Zect
will 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.
- 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.
- ref This option is used to save ref to parent ViewModel, so that access it's instance with the specified name by "$refs".
this$refsheader // 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:
Header
Usage:
Render result:
Header
Computed Properties
For those complicated logic, you should use computed properties to replace inline expressions.
var demo = data: host: 'https://github.com' user: 'switer' repos: 'zect' computed: link: // property dependencies of getter deps: 'host' 'user' 'repos' // property getter { var $data = this$data return $datahost $datauser $datarepos // https://github.com/switer/zect } // setter is optional { // input: https://github.com/zectjs/zect.github.io var $data = this$data var parts = link $datarepos = parts $datauser = parts $datahost = parts }
List operate
- Display List
Use z-repeat
block element to repeat display template.
{$value}
data: items: "Switer" "Zect" "Xiaokai"
Result:
* Switer
* Zect
* Xiaokai
- Append More
vm$dataitems
Will delta update:
* Switer
* Zect
* Xiaokai
+ Web Component
- Append Before
vm$dataitems
Result:
+ Web Component
+ MVVM
* Switer
* Zect
* Xiaokai
- Remove
vm$dataitems
Result:
+ Web Component
- MVVM
* Switer
* Zect
* Xiaokai
- Push
vm$dataitems
Result:
* Switer
* Zect
* Xiaokai
+ Web Component
and shift
, unshift
, sort
, reverse
, pop
. shift
, unshift
, pop
whill be Update in delta (includes splice
and concat
).
License
MIT