Omi 理念

指令详解

{{expression}}

    <div>Hello, {{name}}</div>

data:

{ name : 'Omi' }

result:

<div>Hello, Omi</div>

o-if

<div o-if="show">I'm visible {{name}}!</div>
<div o-if="!show">I'm hidden!</div>

data:

 { name : 'Omi',show: true }

result:

<div>I'm visible Omi!</div>

o-repeat

o-repeat="item in array"

o-repeat="item in object"

o-repeat="item in array by index"

o-repeat="item in object by key"

o-repeat="(index, value) in array"

o-repeat="(key, value) in object"

default index or key is $index

<ul>
    <li o-repeat="item in list" o-if="item.show">
        {{$index}} - {{item.name}}
    </li>
</ul>

data:

{
    list: [
        {name: "Hello" ,show: true},
        {name: "Omi" ,show: true},
        {name: "AlloyTeam"}
    ]
}

result:

<ul>
    <li> 
        0 - Hello 
    </li>
    <li> 
        1 - Omi 
    </li>
</ul>

o-filter

Omi.template.filter(String filterName, Function func(input, args...)) {{input|filte1:args1:args2...|filter2:args...}}

example:

Omi.template.filter('shortTitle', function(input, length){
    return (input || '').substr(0, length);
});

<ul o-repeat="item in list">
    <li class="title">
        {{item.title|shortTitle:10}}
    </li>
</ul>

data:

{ 
    list : [
        {title:'short'},
        {title:'i am too long!'}
    ] 
}

o-html

<div o-html="html"></div>

data:

{ html : '<span style="color:red;">test o-html</span>' }

o-replace

replace this node with html

var tpl = '<div o-replace="html"></div>'

data:

{ html : '<span style="color:red;">test o-replace</span>' }

div will be replaced with given html