Advanced usage of doT and use of loadData

This article is from APICloud official forum.
Thank you for sharing gp3098.

The template was written directly in the script tag at the bottom of the page, but now it's different. Using the loadData method of doT.js and api, the whole page is a template. In the past, when opening frame or window, I didn't understand how url and data work together. I always thought that data could only be loaded into some static pages, and had no other use.

Learned some advanced usage of doT.js, can better build multi-page programs.
When opening a new page, it first renders a page through dot and then loads html code by frame or win.

// Data is rendered to the frame's content area//By default, only the first page is rendered.

    function renderData(currid, tag, page, size, sort, order) {

            var currentSort = $api.dom('.screen a.on');

            var param = {
                    id: currid ||,
                    page: 1,
                    size: 10,
                    sort: sort || currentSort.dataset.sort,
                    order: order || currentSort.dataset.order,
            //Read two templates from a file
            var template = loadfile('widget://mall/components/goodsList_frame.html');
            var template2 = loadfile('widget://mall/components/goodsitem.html');
            // var template = loadfile('widget://mall/components/goods.html');
            var def = {
                    debug: true,
                    content: template2, //The second template is used for reuse when loading more content
                    urlparam: param,
            var tempFn = doT.template(template, undefined, def); //Functions for generating rendering templates
                    tag: ajaxtag1
            // Console. warn (parseUrl (param); // Used to parse url and change json's url into string form
            ajaxtag1 = $api.get(DOMAIN + '/ajax/goodslist?' + parseUrl(param), function(ret, err) {
                    var html = tempFn(ret);
                    // To check the true content of the frame here in html!!!
                    // console.warn(html);
                    //The page is loaded into the frame by loading Data, and the frame content is reloaded every time the parameters are changed.
                            frameName: 'goods_list',
                            url: 'widget://mall/components /', // pages to be loaded, the root path of css and js paths in data!!!
                            data: html //The html page rendered by dot becomes the content of frame. The whole page of the generated frame page can use dot template grammar because the whole page is a template.
            }, 'json');

Copy code
Here the loadfile is the official api method
There are two kinds of synchronization and asynchronization, both of which have been encapsulated, but the encapsulation is not good enough. Only one synchronization is shown, otherwise the code is incomplete.

function loadfile(url) {

return api.readFile({
    sync: true,
    path: url || '',

Copy code
There is also the official $api.get method that does not return tag s to cancel ajax requests

// json to url parameter
var parseUrl = function(urlparam) {

return Object.keys(urlparam).map(function(key) {
    return encodeURIComponent(key) + "=" + encodeURIComponent(urlparam[key]);

Copy code
Template 1

var template = loadfile('widget://mall/components/goodsList_frame.html'); the corresponding template file is below
Copy code
<!DOCTYPE html>
<html lang="en">


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/all.css">
    <title>Search Contents for Secondary Classification of Commodities</title>



    <div class="product_list clearfix content" data-id="{{}}" data-sort="{{#def.urlparam.sort}}" data-order="{{#def.urlparam.order}}" data-page="{{}}" data-size="{{#def.urlparam.size}}">
            <!-- There def.content Pre-compiled corresponding to the previous page def Inside, -->
            <!-- and content Internal html I also extracted it separately and put it on a page to facilitate repeated calls. -->
            {{#def.content }}
    <!-- This is just to say that there is such a usage, but it does not mean that it must be added. header perhaps footer,because api The reasons for the framework, -->
    <!-- I'll load it on the last page. header that is window Inside, then adaptive height head -->
    <!-- The bottom is sometimes used tablayout Write, so you don't need it. -->

<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/api.js"> </script>
<script src="../js/main.js"></script>
<script src="../js/goodsList_frame.js" charset="utf-8"></script>
<! - Adding a script tag to place native js is also possible, but in order to prevent dot template collision, it is recommended that it be loaded in a file by reference, and so is css - >

Copy code
Template 2
{{?it.list && it.list.length>0}}
<a href="javascript:;" onclick="openTabFrame(this);" data-id="{{=value.goods_id}}" data-userid="{{=value.user_id}}" data-name="{{=value.goods_name}}" data-saled="{{=value.sales_volume}}" data-price1="{{=value.market_price}}" data-price2="{{=value.shop_price}}"

    data-thumb="{{=value.goods_thumb}}" data-stock="{{=value.goods_number}}" tapmode>
    <img src="{{= DOMAIN + '/'+value.goods_thumb}}" alt="">
    <p>¥{{=value.market_price}}<span>Integral 20%</span><span>Full 50 yuan minus 5 yuan</span></p>

Copy code

Tags: Android JSON Javascript

Posted on Mon, 12 Aug 2019 03:02:43 -0700 by somethingorothe