如何使用tabletop.js和小胡子模板在浏览器上打印数据?

时间:2019-01-06 05:56:32

标签: mustache tabletop.js

我有一个小胡子模板,如果我直接从服务器中的.json文件中加载数据,该模板效果很好,但是由于信息不断变化,因此我需要使用Google工作表。

我使用tabletop.js从Google表格获取数据,并且可以正常工作。 我有一个工作的胡子模板。

现在,我不知道如何将tabletop.js生成的数据调用到我的小胡子模板中。

这是我正在使用的代码,我认为将用于数据'data-BD.json'的url更改为具有tabletop.js代码的html可以,但不能。

    var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1jr7C7ec9HIlgfEdSYVs-kL_6DMsR_65AiQ9_Yepi3T0/edit?usp=sharing';
    var count = 0;

    function init() {
        Tabletop.init({
            key: publicSpreadsheetUrl,
            callback: showInfo,
            simpleSheet: true
        })
    }
    window.addEventListener('DOMContentLoaded', init);


  //this prints the data into the template but using a .json file in the server (which I will not have in production)
    $(document).ready(function(){
        $.when($.ajax({url: "../mustache/receta.mst", dataType: 'text'}),$.ajax({url: "../mustache/data-BD.json"}))
        .done(function(template, data){
            Mustache.parse(template[0]);
            var rendered = Mustache.render(template[0], {receta: data[0].receta});
            $(".container").html(rendered);
        })
    });


    // this prints the data directli from the sheet using tabletop, but does not use the mustache template
    function showInfo(data, tabletop) {
    var div = document.getElementById('data'),
        html = "<h1>SHEET " + (++count) + "</h1>",
        prop, i;
    for(i = 0; i < data.length; i++) {
      for(prop in data[i]) {
        html = html + "&nbsp;-&nbsp;" + data[i][prop];
      }
      html = html + "<hr><br>";
    }
    div.innerHTML = div.innerHTML + html;
  }

我还尝试了使用该脚本打印胡子模板,但是我找不到如何用桌面数据替换{name:“ Luke”}

function loadUser() {
      $.get('template.mst', function(template) {
        var rendered = Mustache.render(template, {name: "Luke"});
        $('#target').html(rendered);
      });
    }

谢谢!

0 个答案:

没有答案