模板与局部刷新

更多组件加载、使用的方式

在开篇 Brix 组件初探 中，我们介绍了两种加载组件的方式：

  • 直接 new Keystone
  • 使用 new Pagelet 让它代劳

这本文中，我们将介绍 Brix 组件中的模板机制，和这样做能取得的好处 —— 局部刷新。

方式三：模板与容器

用模板和容器的方式 new HelloWorld

<div id="container3">
</div>
<script type="text/template" id="tmpl_helloword1">
    <div>
        <span>Hello <span>World</span></span>
    </div>
</script>

KISSY.use('helloworld',function(S,HelloWorld){
    var helloworld = new HelloWorld({
        container: '#container3',
        tmpl: S.one('#tmpl_helloword1').html()
    });
    helloworld.render();
});

用模板和容器的方式 new Pagelet

<div id="container4">
</div>
<script type="text/template" id="tmpl_helloword1">
    <div bx-name="helloworld" path="helloworld">
        <span>Hello <span>World</span></span>
    </div>
</script>

KISSY.use('brix/core/pagelet',function(S,Pagelet){
    var pagelet = new Pagelet({container:'#container4',tmpl:S.one('#tmpl_helloword1').html()});
    pagelet.render();
});

方式四：局部刷新

局部刷新 new HelloWorld

用模板、容器、数据的方式 new HelloWorld，实现局部刷新

<div id="container5">
    <button id="btn5" class="btn btn-taobao btn-size30">
        rename to LiMu
    </button>
</div>
<script type="text/template" id="tmpl_helloword2">
    <div bx-name="helloworld">
        <span>Hello
            <span bx-tmpl="helloworld" bx-datakey="name">{{name}}</span>
        </span>
    </div>
</script>

var data = {
    name:'ZuoMo'
};
KISSY.use('helloworld',function(S,HelloWorld){
    var helloworld = new HelloWorld({container:'#container5',tmpl:S.one('#tmpl_helloword2').html(),data:data});
    helloworld.render();

    S.one('#btn5').on('click',function(){
        //模板局部刷新
        helloworld.setChunkData('name','LiMu');
    });
});

demo：

局部刷新 new Pagelet

用模板、容器、数据的方式 new Pagelet，实现局部刷新

<div id="container6">
    <button id="btn6" class="btn btn-taobao btn-size30">
        rename to YiCai
    </button>
</div>
<script type="text/template" id="tmpl_helloword2">
    <div bx-name="helloworld" path="helloworld">
        <span>Hello
            <span bx-tmpl="helloworld" bx-datakey="name">{{name}}</span>
        </span>
    </div>
</script>

var data = {
    name:'ZuoMo'
};

KISSY.use('brix/core/pagelet',function(S,Pagelet){
    var pagelet = new Pagelet({container:'#container6',tmpl:S.one('#tmpl_helloword2').html(),data:data});
    pagelet.render();
    pagelet.addBehavior();
    S.one('#btn6').on('click',function(){
        //模板局部刷新
        pagelet.setChunkData('name','YiCai');
    });
});