Mustache将数据发送回Jquery

Question

如何将我的胡子模板中的数据发送回JQuery？

您好..这是我第一次使用模板库。我的大部分代码都运行正常。但此时，我需要从两个不同的来源加载数据。

第一个源是一个json文件，加载所有用户。我有用户名和ID。 第二个源需要userid（我在第一个模板中加载）。我想从第一个源获取数据并在模板上呈现它。同时，我想将这些id发送到ajax并从第二个源加载信息并在同一模板上呈现它。 我只需要更新第二个来源的1个信息。 如何将此span id发送到ajax函数？如果它是一个按钮，我可以简单地使用带有id（工作）的onclick事件。但我必须更新html。我该怎么办？ P.S我也不能在一个json中加入这两个数据。数据通过API传递。

我的小胡子模板

<script id="profile-template" type="text/template">
{#users}}

     Your user id is {{id}} <br/>
     Your name is {{name}}  <br />

     Your other information <span id="{{id}}-variable-text">this data has to be loaded from other api </span>
    <button onclick="updatetext({{id}});">Update text </button>


{{/users}}

我的JQuery

<script type="text/javascript">
$(document).ready(function(){
    $('#spanID-from-template').html(function(){
        // ajax 
    })
}

我在ajax中使用以下代码来命名和来自第一个来源的ID。 这就是ajax success function（）

中发生的事情

              var template = $("#profile-template").html();
              var html = Mustache.to_html(template, response);
              $('#users').append(html);

我添加了一点hack来使用onclick事件来更新id

的文本

检查上面的模板和以下jquery

function updatetext(id){
 $("#"+id+"-variable-text").html("updated-text");

 }

Answer 1

如果您希望使用渲染模板中的数据，可以执行以下操作...

这里的问题是你正在做的事情的异步性质;从渲染模板中渲染和调用变量。

var template = $("#profile-template").html();
var html = Mustache.to_html(template, response);
$('#users').append(html).promise().done(function(){
   $.ajax({
           url: "url here", 
           success: function(result){
              response = response.concat(result); //Do some reduction here!
              var html = Mustache.to_html(template, response); //This will only render once the promise is fulfilled
              $('#users').append(html);
           },
           error: function(x, s, e){
               console.log(e);
           }
    });
 });