Vir({
  '4* .box': {
    '.apple': 'Big Apple'
  }
})

Vir({
  '.box' : [
    { '.apple': 'Big Apple' },
    { '.apple': 'Big Apple' },
    { '.apple': 'Big Apple' },
    { '.apple': 'Big Apple' }
  ]
})
// 可能有点特别, 反直觉. 有可能你认为这表示一个盒子里四个apple. 注意vir.js的数组节点是分述语法. 详见语法四.8

// 为了不被糊弄写个注释也可以
Vir({
  '4; .box' : [
    { '.apple': 'Big Apple' },
    { '.apple': 'Big Apple' },
    { '.apple': 'Big Apple' },
    { '.apple': 'Big Apple' }
  ]
})

import R = require('ramda')
Vir({
  '.box' : R.map(
    (e)=>({ '.apple': e }), 
    R.repeat('Big Apple', 4)
  )
})

const data = ['','','']
function toArgsSrc(v) {
  return {
    args: { src: v }
  }
}

Vir({
  "img .bigImage": data.map(toArgsSrc)
})

// 如果又不是img了
Vir({
  "video .playingBackground": data.map(toArgsSrc)
}) // 逻辑逻辑完美的复用

Vir(this.ele, {
  "img ::pics": {
    $: data.map(toArgsSrc) // 把之前直接写在尾部的,用$接起来

    , style: { // 这个style 会被复用到每一个img上;
      border: '1px solid #aaa'
    }
  }
})

// use typescript
// modelOne
import { Vir } from 'vir.js';
import * as $ from 'jquery';

function One (ele : HTMLElement) {
  const sayWords = 'I\'am model one'

  Vir(ele, {
    '.say': sayWords
    , on: { // 绑定个事件也可以
      click() {
        alert(sayWords)
      }
    }
  })
  
}
//model two
function Two (ele : HTMLElement) {
  const sayWords = 'I\'am model two'

  Vir(ele, {
    '.say': sayWords
  })

  // 想用jquery就用, 自由如此
  $(ele).on('click',()=> { 
    alert(sayWords)
  })
}

// usage 1: 
Vir({
  '.model': One
  , '2; .model': Two
})

// usage 1 等价于如下: usage 2
Vir({
  '.model': [
    One, Two
  ]
})

// 说白了就是有个函数节点, 看看如下, 详细见语法篇
Vir({
  '.model'(ele) {
    ele.innerHTML = 'abc'
  }
})

".parent > .son":{
    $:"son"
    ///绑定在最后生成的元素上;即为.son上;
}

var test = Vir({
    "div ::parentDiv > 3*div ::threeChild":{
        $:"son"
        ///绑定在最后生成的元素上;即为.son上;
    }
})

// 使用变量threeChild;
test.args.threeChild.forEach((v)=>{
    v.innerHTML = "use";
})

Vir({
  '.array > .item' : [
    'string'
    , true
    , 123  //primitive转字符串显示

    , {  // object 当做新的vir节点解析
      '#obj' : 'object'
    }
    , (ele) => {  // 调用函数处理, 唯一入口是框架生成的HTMLElememt
      ele.innerHTML = 'function'
    }
    , null  // 结果不显示
    , undefined  // 显示出undefined
  ]
})

// 分述
Vir({
  ".parent > 3* .son":["son1","son2","son3"]
})

// 复述
Vir({
  ".parent > 3* .son": "son"
})

Vir ({
  'span .color': {
    $: ['red', 'blue']
    , on: {
      click() {
        alert(this.innerHTML)
      }
    }
  }
})

Vir({
  'h2': "头"
  , "english; h2" : "head"
})
// 属性名只能唯一, 使用带注释的属性名. 我觉的这个不仅能解决问题还解决的不错.

import { EventPool } from 'vir.js';
const ev = new EventPool();

ev.listen('say', (data)=> {
  alert(data)
})

function say () {
  ev.emit('say', 'hello')
}

// 延时
setTimeout(say, 1000)

import { EventPool } from 'vir.js';
// A -> B -> C;
function job(B: Promise) {
  // do A 
  B.then((data)=>{
    // do C
  })
}
const ev = new EventPool();

// set B, B is a Promise object
job(ev.listen('done')) // ev.listen('EveCode') , 单参数,返回的Promise 对象.

ev.emit('done', 'B is ok!')

// 这里只是一种简洁的写法, 实际可能更复杂!
ev.emit('done', 'ok')

ev.listenAll('done',(ok)=>{
  alert(ok)
})

ev.done('done','ok');
ev.after('done', (ok)=>{
  console.log(ok)
})
// after 成功的接受到了done事件; after 在done 后立即触发, after 保证了顺序.
// done 的事件也可以被listen监听;

// 这里只是一种简洁的写法, 实际可能更复杂!
ev.emit('done', 'ok')

function listen(str){
  ev.listenAll('done',(ok)=>{
    alert(str)
  })
}
listen('A');

// 改变主意了, 想让'done' 后alert'B'了, 
listen('B'); // 这是错误的, 之前监听'A'的没删掉; 

ev.emit('done', 'ok')

function listen(str){
  ev.listen('done',(ok)=>{ // 使用listen
    alert(str)
  })
}
listen('A');

// 改变主意了, 想让'done' 后alert'B'了, 
listen('B'); // ok, 之前监听'A'的删掉了;