Skip to content

HTML to KISSY Template Module

Neekey edited this page Sep 10, 2013 · 1 revision

使用grunt-kissy-template,将html文件转化为可以直接被require的KISSY模块。

通过这个功能,我们再也不需要将JS模板利用script或者textarea塞到页面中了。

如何使用

创建一个以-tpl.html结尾的文件,如mod-tpl.html,其内容如下:

<div class="name">{{name}}</div>
<div class="sex">{{sex}}</div>

则打包后将生成mod-tpl.js,内容如下:

KISSY.add(function(){
    return {
        html: 'html文件中的内容'
    };
});

我们可以直接在其他文件中引入:

/**
 * 入口文件
 */
KISSY.add(function( S, TPL, Template ){

    S.ready(function(){
         new Template( TPL.html ).render( { name: 'abc', sex: 'none' });
    });

}, { requires: [ './mod-tpl', 'template' ] });

Clone this wiki locally