小胡子将数据发送回 Jquery

Question

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

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

第一个来源是一个 json 文件，加载所有用户。我有用户名和 ID。 第二个来源需要用户 ID（我在第一个模板中加载）。我想从第一个来源获取数据并将其呈现在模板上。同时，我想将这些 id 发送到 ajax 并从第二个来源加载信息并将其呈现在同一个模板上。 我只需要从第二个来源更新 1 个信息。 如何将此跨度 ID 发送到 ajax 函数？如果它是一个按钮，我可以简单地使用带有 id 的 onclick 事件（工作）。但我必须更新html。我该怎么办？
PS我也不能在一个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 成功函数（）中发生的事情

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

我添加了一个小技巧来使用 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);
           }
    });
 });