5 Star 2 Fork 0

virtuecai / jquery.underscore.render

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

jquery.underscore.render jQuery Plugin

Demo & Examples

https://virtuecai.github.io/jquery.underscore.render/

Example Usage

HTML

<style>
  .underscore-template {
    display: none;
  }
</style>
<table>
    <tbody id="tbody1">
        <script class="underscore-template" type="text/html">
            <tr>
                <td>{%= $index %}</td>
                <td>{%= name %}</td>
                <td>{%= age %}</td>
                {% _.each(cars, function(a , b, c){ %}
                <td>{%= a %}</td>
                {% }); %}
            </tr>
        </script>
    </tbody>
</table>
var userList = [
    {name: 'virtuecai', age: 18, cars: ['car1','car2']},
    {name: 'lq', age: 20, cars: ['car1','car2', 'car3']}
];
$('#tbody1').templateRender({data: userList});
<table>
    <tbody id="tbody2">
        <tr class="underscore-template">
            <td>{%= $index %}</td>
            <td>{%= name %}</td>
            <td>{%= age %}</td>
        </tr>
    </tbody>
</table>
var userList = [
    {name: 'virtuecai', age: 18},
    {name: 'lq', age: 20}
];
$('#tbody2').templateRender({data: userList});
<div class="container">
    <h1 class="underscore-template">
        <span>hello, {%= name %}, {%= age %}</span>
    </h1>
</div>
var user = {name: 'virtuecai', age: 18};
$('div.container').templateRender({data: user});

Options

options: {
    /**
     * 渲染模版的数据, 对象{} 或者 对象数组[{..},{..}]
     */
    data: {},
    /**
     * 是否启用默认图片加载, 如果为 true, image 表情语法: <img data-src='' default-src='' />
     * default-src 为 data-src 加载失败后显示的图片
     *  data-src='' 最终会 set attr src 中
     *
     */
    enableDefaultImageSrc: false,
    /**
     * 自动移除上一次渲染的元素
     */
    autoRemove: true,
    beforeCallback: function () {
    },
    afterCallback: function () {
    },
    /**
     * 检查到传入 data 数据为空时回调
     * @param $container 调用插件的 jquery 对象
     */
    emptyDataCallBack: function ($container) {

    },
    /**
     * 针对于 data Array, 单个模版 渲染之前
     * @param item Array 中的单个数据, 如果是原始数据类型, 需要转换 {} 对象模版使用
     */
    itemRenderBeforeCallBack: function (item) {

    },
    /**
     * 针对于 data Array, 单个模版 渲染之前
     * @param $item 模版+数据 渲染之后的 jquery 对象(dom)
     */
    itemRenderAfterCallBack: function ($item) {

    }
}

Notes

  • 依赖 underscore
  • 轻量级
  • 正对于图片显示, 请使用 data-src;
  • Demo 示例, 用的 seajs, 不熟悉移除即可.
  • 可渲染单个/多个数据;
  • 针对于table(强解析)动态td, tr, th 等, 采用<script>;
  • 针对于 data 为 Array, 会给每个对象附加一个 $index 属性, 用于模版中使用.
  • 如何获取传递给模版渲染的数据 ? 比如 渲染的是 tbody 中 tr, 请如下示例代码
var itemList = [{...},{...},{...}];
var item = $('tbody tr:fist').data('item');//第一个tr
// item 数据就是 itemList[0]
  • 一个元素下仅支持一个标记为 class="underscore-template" 的模板代码

1.1.2 更新

  • options.itemRenderBeforeCallback(item);
  • options.itemRenderAfterCallback($item);
  • 增加渲染模板显示位置特性, 渲染出来的数据会插入到模板编写制定位置. 之前版本仅实现了模板父级元素末尾;
  • 增加插件调用方式: $('..').templateRender(..); 和 $('..').render(..); (采纳架构师的强烈要求)

空文件

简介

扩展 underscore 渲染 展开 收起
JavaScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/virtuecai/jquery.underscore.render.git
git@gitee.com:virtuecai/jquery.underscore.render.git
virtuecai
jquery.underscore.render
jquery.underscore.render
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891