如何在组件开发中使用模板

安装方式

light plugin -a template

详细说明

lighting-plugin-template是为了兼容早期框架中的template目录下的模板文件编译而开发的。

template插件会将src目录下所有的xxx.tpl文件编译生成相应的xxx.js文件，开发者可以通过引入生成的.js文件并调用App.xxxTemplate(param)来使用模版。

示例

src/template/test.tpl

// 编写模版
<%_.each(obj, function(i){%>
	<%=i%>
<%})%>

注意，模板中的参数都要为obj

src/page/index.html

<!DOCTYPE html>
<html>
<head>
  <snippet id="header" />
  <!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/style.css" />
  <!--<link rel="stylesheet" href="css/index.css" />-->
  <!-- endbuild -->
  <title>light-template-Just For Fun</title>
</head>
<body>
  <div id="main">
    <view id="light" home="true" />
  </div>
  <snippet id="footer" />
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  //需要引入生成的.js文件
  <script src="tempalte/test.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <!-- build:js js/app.js -->
  <!--<script src="vue-components.js"></script>-->
  <!--<script type="text/javascript" src="js/lib/underscore.js"></script>-->
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    Light.start();
  </script>
</body>
</html>

src/js/view/light.js

;
(function() {
    App.defineViewModel("#light", {
        data: {
            list:['HTML','JavaScript','CSS'],
            listTpl: ''
        },
        watch: {},
        methods: {
            show:function(){
	            // 获取模版渲染后的值
                this.listTpl = App.testTemplate(this.list);
            }
        }
    }, {
        ready: function() {},
        beforeRender: function(params) {},
        afterRender: function(params) {
        },
        beforeUnRender: function() {},
        afterUnRender: function() {}
    });
})();

src/html/view/light.html

// 将模版插入
<div id="light" style="display:none;">
	<h1>Hello Light</h1>
	<ul v-html="listTpl"></ul>
	<button v-on:click="show">show something</button>
</div>

project.json

{
  "project":"demo",
  "version":"0.0.1",
  "desc":"Just For Fun",
  "type":"light-1.0",
  "plugins":["template"]  
}

打包编译时可以使用指令： light release -e(plugins项配置有less的情况下) 或者 light release -e template