zoukankan      html  css  js  c++  java
  • arttemplate与webpack的应用

    模板渲染使用arttemplate,使用方法如下:

    1. 普通使用
      普通使用把渲染模板写在<script>标签里面,引入arttemplate.js,从服务端接收数据(数组与对象的形式),然后调用arttemplate提供的方法渲染。例如,可以直接调用template()方法(需要获取html标签的id);或者使用complie()先编译模板,然后再传入数据;或者使用render()方法直接编译并传入数据。生成的html内容直接赋值到一个变量html,然后通过innerHTML方法把html内容写进去。
    2. webpack
      和普通使用一样,但是模板单独写在.tpl文件,然后require()进来,用complie()方法编译成函数,再传入从服务端传来的对象和数组。同时安装ejs-loader,用于识别.tpl后缀的文件。

    模板写法如下:

    1. 模板tpl
    {{each data as item index}}
    <div class='item'>
        <h1>{{item.title}}</h1>
        <li>{{index}}.{{item.name}}</li>
    </div>
    {{/each}}
    
    1. js渲染函数
    //data是服务端传来的数据
    function htmlRender(data) {
        var tpl = require('index.tpl')();
        var render = artT.compile(tpl);//render被编译成一个函数了
    
        var obj = {
            data: data//第一个data是模板tpl对应的data(each ‘data’),第二个data是传入的数据
        }
        var html = render(obj);
        $('items').html(html);
    }
    htmlRender(data.content);
    
    1. 数据data
    {
        content: [
            {title: 'hello', name: 'dk'},
            {title: 'hi', name: 'bl'},
            {title: 'hey', name: 'gy'},
        ]
    }
    
  • 相关阅读:
    web api的新玩法
    发送邮件的小功能(.net core 版)
    Docker入门命令备份
    在控制台进行依赖注入(DI in Console)
    .net Core 2.0使用NLog
    .Net Core下使用WCF
    C#枚举最优雅的用法
    Jquery.Ajax的使用方法
    PuTTY+Xming实现X11的ssh转发
    使用XMing+putty运行linux图形界面程序
  • 原文地址:https://www.cnblogs.com/dkplus/p/8478119.html
Copyright © 2011-2022 走看看