bootstrap - Julienedies/brick GitHub Wiki

1. 自动启动

页面引入brick后，默认brick会在jquery的domready事件回调里通过一个setTimeout启动，这样做主要是为了能够在brick运行前，对brick做一些配置。

    //bootstrap
    $(function () {
        setTimeout(function () {
            if(brick.get('bootstrap.auto') === false) return;
            brick.bootstrap(document.body);
        }, 10);
    });

2. 手动启动

禁止brick自动启动。

brick.set('bootstrap.auto', false);

根据需要启动brick。

$.get('url').done(function(data){
    var body = document.body;
    $(body).html(data);
    brick.bootstrap(body);
});

3. 运行

brick启动之后，会根据bootstrap方法传入的dom节点（默认为document.body）做为根节点，递归遍历该节点及其所有子节点。遍历节点时会读取当前节点的attributes,以属性名为key读取指令集，如果有对应的指令函数，则执行该指令函数，并传入封装为jQuery对象的当前节点做为参数。详见代码

<html>
  <head></head>
  <body>
  <div id="ctrl" ic-ctrl="mainCtrl" ic-click="onclick">

</div>
  <!-- 引入相关类库及brick -->
  <script>
  brick.controllers.reg('mainCtrl', function(scope){
console.log(scope);
var $elm = scope.$elm;

scope.onclick = function(e){
   console.log(e, this);
   $(this).append('hello world');
};
});
</script>
</body>
</html>

brick启动之后，会在遍历dom节点#ctrl时解析到ic-ctrl="mainCtrl"属性，ic-ctrl是内置的特殊指令，brick会根据ic-ctrl属性值从controllers里查找对应的控制器函数，并且执行，传入scope做为第一个参数。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️