现在位置首页 / 前端开发 /正文

JavaScript JSONP 数据生成html模板插件--Dug.js

作者: IT小兵 | 2014年3月27日| 热度:℃ | 评论: |参与:

在获取数据的时候,如果我们获取到的数据库是json数据,一般的做法是循环数据或者手动写

一些html代码。这样,不仅麻烦,而且维护起来很头疼。

今天介绍一个JavaScript JSONP 数据生成html模板插件--Dug.js。

dug.js是单独的一个插件,不依赖于jquery等。

他是一个简单的独立脚本库。

官方地址:

Dug.js — A JSONP to HTML Script — Rog.ie


http://rog.ie/blog/dugjs-a-jsonp-to-html-script 


使用起来非常简单:

1、引用:dug.js

<script src="/js/dug.js"></script>.

2、设置参数

<script>
  dug({
      endpoint: 'http://api.dribbble.com/players/justinmezzell/shots',
      template: '{{#shots}}<img src="{{image_400_url}}">{{/shots}}'
  });
</script>

参数说明:

  • target — the id of an existing DOM element to put the html results in.

    你需要展示的dom控件id

  • cacheExpire — # of milliseconds to cache data on the client side (using localstorage). 0 for no caching.

    缓存

  • callbackParam — the name of the query variable a JSONP service will use for a callback function. Most services just use 'callback=functionName', but sometimes a service will use a different query variable name.

    自定义的回调函数。

  • success — a function to call when JSONP data is successfully retrieved.

    返回数据成功的函数。

  • error — a function to call when JSONP data is not successfully retrieved.

    调用服务失败

  • beforeRender @param data — a function called before Dug.js renders the template. Helpful for trimming/changing the data before it renders.

    在完成html绘制之前的事件

  • afterRender @param data — a function called after Dug.js renders the template.

    完成html绘制之后。

完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../dug.js"></script>
</head>
<body>
  <div id="photos">Loading...</div>
  <script>
    dug({
      endpoint: 'https://api.500px.com/v1/photos.jsonp?
      feature=user&username=garand&image_size=3&rpp=6
      &_method=get&sdk_key=3cece886f943df26ab3e852b15a6dfdc5d8d8ff9',
      target: 'photos',
      template: '<h1>\
            <span>500px</span> \
          </h1>\
          <ul>\
            {{#photos}}\
              <li>\
                <a href="http://500px.com/photo/{{id}}">\
                  <h3>{{name}}</h3>\
                  <img src="{{image_url}}">\
                </a>\
              </li>\
            {{/photos}}\
          </ul>'
    });
  </script>
</body>
</html>

转发注明:IT分享  http://www.suchso.com 


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询