请问这个JQ代码怎么用模板引擎template.js?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

请问这个JQ代码怎么用模板引擎template.js?

爵霸 2016-03-05 12:56:53 2017
  (function ($) {
      var handler = null,
          page = 1,
          isLoading = false,
          apiURL = 'http://www.wookmark.com/api/json/popular';

      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#tiles'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
      };

      /**
       * When scrolled all the way to the bottom, add more tiles.
       */
      function onScroll(event) {
        // Only check when we're not still waiting for data.
        if(!isLoading) {
          // Check if we're within 100 pixels of the bottom edge of the broser window.
          var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
          if(closeToBottom) {
            loadData();
          }
        }
      };

      /**
       * Refreshes the layout.
       */
      function applyLayout() {
        options.container.imagesLoaded(function() {
          // Create a new layout handler when images have loaded.
          handler = $('#tiles li');
          handler.wookmark(options);
        });
      };

      /**
       * Loads data from the API.
       */
      function loadData() {
        isLoading = true;
        $('#loaderCircle').show();

        $.ajax({
          url: apiURL,
          dataType: 'jsonp',
          data: {page: page}, // Page parameter to make sure we load new data
          success: onLoadData
        });
      };

      /**
       * Receives data from the API, creates HTML for images and updates the layout
       */
      function onLoadData(data) {
        isLoading = false;
        $('#loaderCircle').hide();

        // Increment page index for future calls.
        page++;

        // Create HTML for the images.
        var html = '';
        var i=0, length=data.length, image;
        for(; i<length; i++) {
          image = data[i];
          html += '<li>';

          // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
          html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">';

          // Image title.
          html += '<p>'+image.title+'</p>';

          html += '</li>';
        }

        // Add image HTML to the page.
        $('#tiles').append(html);

        // Apply layout.
        applyLayout();
      };

      // Capture scroll event.
      $(document).bind('scroll', onScroll);

      // Load first data from the API.
      loadData();
    })(jQuery);

上面那个HTML是直接写在JS里面,怎么用模板引擎template.js替换掉(https://github.com/aui/artTemplate

  function onLoadData(data) {
        isLoading = false;
        $('#loaderCircle').hide();

        // Increment page index for future calls.
        page++;

        // Create HTML for the images.
        var html = '';
        var i=0, length=data.length, image;
        for(; i<length; i++) {
          image = data[i];
          html += '<li>';

          // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
          html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">';

          // Image title.
          html += '<p>'+image.title+'</p>';

          html += '</li>';
        }

        // Add image HTML to the page.
        $('#tiles').append(html);
云服务器登录 云服务器设置
分享到
取消 提交回答
全部回答(1)
  • 爵霸
    2019-07-17 18:53:12

    页头引用Javascipt外加两处修改。

    <!-- Include artTemplate -->
    <script src="../artTemplate/src/template.js"></script>
    
    <script type="text/javascript">
    (function ($) {
      var handler = null,
          page = 1,
          isLoading = false,
          apiURL = 'http://www.wookmark.com/api/json/popular',
          artTemplateBone = 
            '<% for (var i = 0; i < data.length; i ++) {%>'
               +   '<li>'
               + '<img src="<%=data[i].preview%>" width="200" height="<%=Math.round(data[i].height/data[i].width*200)%>">'
               + '<p><%=data[i].title%></p>'
               + '</li>'
          + '<%}%>';
    
      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#tiles'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
      };
    
      /**
       * When scrolled all the way to the bottom, add more tiles.
       */
      function onScroll(event) {
        // Only check when we're not still waiting for data.
        if(!isLoading) {
          // Check if we're within 100 pixels of the bottom edge of the broser window.
          var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
          if(closeToBottom) {
            loadData();
          }
        }
      };
    
      /**
       * Refreshes the layout.
       */
      function applyLayout() {
        options.container.imagesLoaded(function() {
          // Create a new layout handler when images have loaded.
          handler = $('#tiles li');
          handler.wookmark(options);
        });
      };
    
      /**
       * Loads data from the API.
       */
      function loadData() {
        isLoading = true;
        $('#loaderCircle').show();
    
        $.ajax({
          url: apiURL,
          dataType: 'jsonp',
          data: {page: page}, // Page parameter to make sure we load new data
          success: onLoadData
        });
      };
    
      /**
       * Receives data from the API, creates HTML for images and updates the layout
       */
      function onLoadData(data) {
        isLoading = false;
        $('#loaderCircle').hide();
    
        // Increment page index for future calls.
        page++;
    
        // Create HTML for the images.
        template.helper('Math', Math)
        var render = template.compile(artTemplateBone)
        , html = render({data: data}) ;
        /*var html = '';
        var i=0, length=data.length, image;
        for(; i<length; i++) {
          image = data[i];
          html += '<li>';
    
          // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
          html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">';
    
          // Image title.
          html += '<p>'+image.title+'</p>';
    
          html += '</li>';
        }*/
    
        // Add image HTML to the page.
        $('#tiles').append(html);
    
        // Apply layout.
        applyLayout();
      };
    
      // Capture scroll event.
      $(document).bind('scroll', onScroll);
    
      // Load first data from the API.
      loadData();
    })(jQuery);
    </script>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题