Skip to content

Latest commit

 

History

History
516 lines (429 loc) · 12.4 KB

README.md

File metadata and controls

516 lines (429 loc) · 12.4 KB
Raw

logo Zect , component & mvvm

Build Status npm version

A lightweight Web components and MVVM framework. Zect's state observer is power by muxjs

Examples

Downloads

Usage

<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'
        }
    }
})

API Reference

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:

<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
    }
})

Two way binding

<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
        }
    }
})

Filter Expression

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>

Template syntax

  • 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>

Reusable Component

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>

Component Template

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
})

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.

<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>

Computed Properties

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('/')
            }
        }
    }
})

List operate

  • 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).

Footer

License

MIT