Question

我正在尝试学习Handlebars.js并想到了一种在网站中使用它的方法。这是一个单页网站，它有两个容器，每个容器有三个div，它们将通过API包含嵌入式Soundcloud播放器。

当在Handlebars处理的脚本标记中包含包含API请求的div时，该网站表现得非常不可靠，并且仅显示六个玩家中的一些。这不是真的一致，但可以一直展示不同的球员。问题似乎出现在Soundcloud javascript SDK中，但我觉得不太熟悉在那里挖掘太多。

因此我想到了某种方法来排除玩家div（参见代码），以便他们立即加载而不是作为javascript处理，但仍然显示在艺术家的下方 - 占位符div中的标题（设置为包含Handlebar脚本的结果。）

问题在于我无法想出一个很好的方法，是否有任何简单的功能（可能有Handlebars助手）可以帮助我做我想做的事情？

<div id="placeholder"></div>
<script id="player-template" type="text/x-handlebars-template">
            <div id="container1">
                    Artist1 - {{title1}}
                    <div id="player1"></div>
                    Artist2 - {{title2}}
                    <div id="player2"></div>
                    Artist3 - {{title3}}
                    <div id="player3"></div>
           </div>
           <div id="container2">
                    Artist4 - {{title4}}
                    <div id="player4"></div>
                    Artist5 - {{title5}}
                    <div id="player5"></div>
                    Artist6 - {{title6}}
                    <div id="player6"></div>
            </div>
    </script>
    <script src="js/handlebars_title_script.js"></script>

一个解决方案当然是为每个Artist - Title div制作一个Handlebar模板，并将每个模板的占位符设置为仅包含Artist1 - {{title1}}的div，但这确实破坏了使用Handlebars来最小化我的点HTML编码。

任何人都有任何要求我如何解决这个问题？

编辑1：

我通过更改我的javascript找到了另一种解决方案（我最初没有发帖，所以显然你无法帮助我）。

$(document).ready(function() {
    var hey = "heya";
    SC.get("/users/artist/tracks", {limit: 1}, function(tracks){
    var title_data1 = tracks[0].title;
    hey = tracks[0].title;
    alert(title_data1);
    alert(hey)
    });


//Data that will replace the handlebars expressions in our template
var playerData = {
    title1 : hey,
};

document.getElementById( 'player-placeholder' ).innerHTML = playerTemplate( playerData );

});

抱歉不好意思。这段代码唯一的问题是title1（在变量playerData中是Handlebars上下文）得到变量的第一个值hey（“heya”）。当它被警告时会弹出真实的标题，如何让title1使用这个值而不将变量嵌入到更多的javascript中（因为这是导致前面提到的错误，玩家出现奇怪的原因）？

Answer 1

注意：在整个评论中，这个答案发生了巨大变化。如果您希望看到此答案的演变，请查看之前的修订版。

在掌握了JsFiddle示例后，我能够以我认为您想要的方式工作。

Working Demo

<强> HTML：

<body>
    <div id="wrapper">
        <div id="player-placeholder"><!-- rendered template goes here --></div>

        <!-- handlebars template: -->
        <script id="player-template" type="text/x-handlebars-template">
            {{#each tracks}}
                <div class="track">
                    <header class="header">
                        <span class="artist">{{user.username}}</span> - <span class="title">{{title}}</span>
                    </header>
                    <section class="player" data-uri="{{permalink_url}}">
                    </section>
                </div>
            {{/each}}
        </script>
    </div>
</body>

<强> JavaScript的：

$(document).ready(function() {

  /*
    get your template string See:

    http://api.jquery.com/id-selector/
    http://api.jquery.com/html/
  */
  var source = $('#player-template').html();

  // compile the template into a handlebars function
  var template = Handlebars.compile(source);

  // initialize sound cloud api
  SC.initialize({
    client_id: '90fb9e15c1e26f39b63f57015ab8da0d'
  });

  /*
    This function will be called once the HTTP transaction
    started by SC.get(...) completes. Note, there's nothing
    wrong with doing this as an anonymous function, I'm
    simply assigning it to a variable to show that this
    is a distinct function that's called later
  */
  var callback = function(tracksResponse){
    /*
       once a response has been received, we'll use the response
       to generate a new context to pass to the template function.
       Note, you can use the template function in here because its
       within a closure. See:
       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
    */
    var context = { tracks: tracksResponse };
    var html = template(context);

    /*
      assign the rendered html to your placeholder on the page
      see: http://api.jquery.com/html/
    */
    $('#player-placeholder').html(html);

    /*
      Now that the html is rendered and on the page, its time to
      setup the sound cloud players. Note the css classes I assigned
      to the track/player. This line selects all of the player's and
      runs the function over each. See:

      http://api.jquery.com/class-selector/
      http://api.jquery.com/each/
    */
    $('.track .player').each(function(index, e){
      var $this = $(this); // jQuery reference to the current object in 'each loop'

      /*
        I assigned the permalink_url of each track to an attribute called 'data-uri'
        This line gets the value of that attribute. See:

        http://api.jquery.com/data/#data2
      */
      var permalink = $this.data('uri'); 
      var urlParameters = '/&maxheight=100&maxwidth=300&format=json&sharing=false';

      /*
        finally we call the sound cloud oEmbed function feeding it the url
        stored in the element, as well as the actual element.

        (see the second argument of the each function: http://api.jquery.com/each/)
      */
      SC.oEmbed(permalink + urlParameters, e);
    });
  };

  // get tracks for your artist
  // Note the "limit" in the object controls the number of items returned
  // by sound cloud
  SC.get("/users/theshins/tracks", {limit: 5}, callback);
});

出了什么问题？

JavaScript是一种单线程，异步，事件驱动的语言。那个巨大的口碑意味着JavaScript并没有真正的线程概念（我故意无视WebWorkers）。要解决这个限制，JavaScript中的几乎所有IO都是非阻塞的（异步）。

每当异步IO事务开始时，它立即返回调用者并继续执行代码。几乎所有IO事务都采用“回调”或具有在IO事务完成时将调用的事件。这意味着所有IO操作的基本模式都遵循以下内容：

创建回调函数
调用IO操作，向其传递完成所需的参数，以及回调
执行立即返回
将来某个时候，回调函数称为

在原始示例中$(document).ready(function() { ... })将一个匿名函数排入队列，以便在引发document.onReady事件时触发。但是，您的原始示例分配了两个回调。这不是问题，事实上.ready(...)旨在接受并排队许多回调。但是，如果你出错了，你有两个独立的代码块，叫做SC.get(...)。

从技术上讲，如果做得对，这不会有问题，但是你的第一个准备回调的目的是设置页面的HTML，而你的第二个回调试图根据页面上的html初始化播放器控件。请记住，这些事件和IO操作是异步的，它们将以任何顺序触发。基本上这成了一个计时问题，你试图初始化页面上的控件，并生成HTML以同时显示在页面上。

如何修复

要解决时间问题，您需要在获取信息，构建模板HTML以及初始化控件时进行同步。有很多方法可以做到这一点，许多框架支持promises的想法，以帮助控制异步事件被触发的顺序，并调用它们的回调。

我采用了简单的路线并将所有SC.get个电话合并为一个，然后在其回调中我渲染了把手模板并初始化了SoundCloud播放器。

从脚本标记中排除HTML

1 个答案: