文章/答案/技术大牛

发布

问从脚本标记中排除HTML
EN

Stack Overflow用户

提问于 2014-08-12 18:21:44

回答 1查看 1.9K关注 0票数 5

我正在努力学习Handlebars.js，并想出了一种在我制作的网站上使用它的方法。这是一个一个页面站点，它将有两个容器，每个容器中有三个div，其中将包含通过API嵌入的Soundcloud播放器。

当将包含API请求的div包含在由工具栏处理的脚本标记中时，站点的行为非常不可靠，只显示了六个播放器中的一些。这并不是真正的一致，但可以随时显示不同的球员。问题似乎出现在Soundcloud javascript中，但是我觉得不太熟悉在那里挖掘太多。

因此，我想出了一些方法来排除player div (请参阅代码)，这样它们就可以立即加载，而不是以javascript的形式处理，但仍然显示在占位符div(它被设置为包含工具栏脚本的结果)的艺术家标题下面。

问题是我不能想出一个很好的方法来做这件事，有什么简单的功能(也许有把手扶)可以帮我做我想做的事吗？

<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>

当然，一种解决方案是为每个艺术家标题div创建一个工具栏模板，并将每个模板的占位符设置为只包含Artist1 -{title1}的div，但这实际上破坏了使用工具栏来最小化我的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中，即工具栏上下文中)获取变量hey ("heya")的第一个值。当它被警告时，它会弹出真正的标题，我如何使title1不用在更多的javascript中嵌套变量而使用这个值(因为这是导致前面提到的错误的原因，玩家会出现奇怪的)？

javascript

html

handlebars.js

回答 1

Stack Overflow用户

发布于 2014-08-13 15:59:52

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

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

工作演示

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和初始化控件时同步。有很多方法可以做到这一点，许多框架都支持承诺的思想，以帮助控制异步事件的触发顺序，并调用它们的回调。

我选择了简单的路径，并将所有的SC.get调用合并到一个，然后在它的回调中呈现工具栏模板并初始化SoundCloud播放器。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25271420

复制

相似问题

问从脚本标记中排除HTML
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从脚本标记中排除HTMLEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从脚本标记中排除HTML
EN