Brix 钩子

这一节,为大家详细的介绍一下Brix中钩子的使用

bx-name

组件名称,在同一个pagelet中唯一,和bx-path组合使用

new组件,并且模板中没有bx-tmpl,省略不写,如下模板:

<script type="text/template" id="tmpl_helloword1">
    <div id="helloworld1">
        <span>Hello
            <span>{{helloworld1_xx_yy}}</span>
        </span>
    </div>
</script>

bx-path

组件地址,一般是包名+文件路径,

如果是系统标准组件,并且bx-name等于组件名,可省略,如下模板:

<script type="text/template" id="tmpl_helloword1">
    <div bx-name="dialog" id="helloworld1">
        <span>Hello
            <span>{{helloworld1_xx_yy}}</span>
        </span>
    </div>
</script>

new pagelet时会去直接下载'brix/gallery/dialog/'

bx-config

组件配置,动态渲染时候的参数,如:bx-config="{xx:'oo'}" 完整代码:

<script type="text/template" id="tmpl_helloword1">
    <div bx-name="dialog" bx-config="{xx:'oo'}" id="helloworld1">
        <span>Hello
            <span>{{helloworld1_xx_yy}}</span>
        </span>
    </div>
</script>

bx-tmpl & bx-datakey

两个钩子组合使用,在数据更新时对模板重新渲染。

  • bx-tmpl:组件模板(值等于bx-name)
  • datakey:组件数据对象key值,可以有多个key,以“,”分割,且支持对象的子对象,如“X.Y,Z.Y.X”

完整代码:

<script type="text/template" id="tmpl_helloword1">
    <div bx-name="dialog" bx-config="{xx:'oo'}" id="helloworld1">
        <span>Hello
            <span bx-tmpl="dialog" bx-datakey="helloworld1_xx_yy">{{helloworld1_xx_yy}}</span>
        </span>
    </div>
</script>