murmur-orz.js v1.0.1

Murmur.js

安装

npm install --save murmur-orz.js

快速上手

let app=new Mpp();
let demo=app.prepare({
    name:'demo',
    template:'<div>{greet}</div>',
  	model:{greet:'world'}
})
demo.render('app');

API

Mpp：构造函数。

new Mpp():Mpp

获取一个应用管理对象

let app=new Mpp();

Mpp#prepare(description)：MurmurPromise

在当前app上注册一个组件,返回一个MurmurPromise对象，这是一个内置的类promise对象，用于管理异步代码。

let demo=app.prepare({
  name:"demo",
  template:'<div>hello world</div>'，
  model:{}
})

description对象：

• name?:组件名称。可选
• template?:HTML字符串。可选
• templateUrl?:HTML字符串地址(默认使用template参数渲染)。可选
• model?数据模型。可选

渲染指令：

• {key}:取值表达式。从模型中取值

• mm-repeat="key":重复渲染指令。

• mm-if="key":是否渲染指令。

• mm-show="key":是否显示指令。

• mm-mount="key":渲染完成指令。当渲染完成时执行对应回调。此时dom及其子节点已渲染完成，但是还没有添加到document文档对象中。

  // <div mm-mount="afterMount" ...>
  {afterMount:function(murmur){
    //murmur是当前节点的管理对象，也是内部的核心对象,会作为第一个参数传给该函数
    //更多关于murmur对象的信息请看下文
  }}

• mm-holder="name"：组件嵌套指令，name代表组件名。当遇到该指令时，会自动将指定组件作为子节点嵌套进指令出现节点中，原有的子节点会被删除。

  // <div mm-holder="footer" ...>
  app.prepare({
    name:"footer",
    template:'<div>i am footer</div>'
  })
  //渲染结果
  //<div mm-holder="footer" ...>
  //	<div>i am footer</div>
  //</div>

• mm-ref="name"：给当前节点设置引用的指令，父节点可以通过该引用名获取到当前节点。具体参考Murmur对象

事件绑定

• mm-click="key":绑定click事件

  // mm-click="click"
  {click:function(murmur,e){
    //murmur是当前节点的管理对象，也是内部的核心对象,会作为第一个参数传给该函数
    //第二个对象为event对象
  }}

  ​

MurmurPromise

MurmurPromise#render(id,callback?)

demo.render('demo',function(){
  //成功渲染之后的回调函数
})

• id:dom的id。应用会被渲染到该dom下。
• callback?：成功之后的回调。可选。

Murmur

Murmur#getNode()

获取当前dom节点

Murmur#update(updateData)

更新当前节点，所有子节点也会更新。新的数据会合并到原有数据上。