html - 将 Handlebars 脚本放在 ember 中的 div 中

Question

我试图将 handlebar 脚本放在左栏中，但我似乎无法将它们放在 div 中。我一定做错了——这个问题可能很愚蠢，但我是初学者并且一直在努力解决这个问题，所以非常感谢您的回答!

<div id="map-canvas"></div>
 <div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-6" id="left">

    <script type="text/x-handlebars"> 
      <p>Happening nearby..</p>
      <hr>
      {{outlet}}
    </script>

    <script type="text/x-handlebars" id="index">
      <p>{{eventName}}</p>
      <p>{{#link-to 'eventdetails'}}tell me about the details{{/link-to}}</p>
    </script>
  </div>
</div>

Answer 1

您没有具体描述应用程序的设置，但我会使用您发布的内容为您指明正确的方向。

1) 您希望 ember 处理 Handlebars 模板并将其插入到 DOM 中。

我假设您发布的顶级模板是您的申请模板。这必须有一个可以放置内容的导出。由于您没有命名您发布的第一个模板，我将假设您希望它内嵌为您的应用程序模板的一部分:

<script type="text/x-handlebars">
...
<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-6" id="left">
        <p>Happening nearby..</p>
        <hr>
        {{outlet}}
    </div>
  </div>
</div>
...
</script>

2) 第二个是当你访问索引路由时，将放入上面的 socket 中的内容。此外，如果您依赖 Ember 来填充模板，则需要指定 data-template-name 而不是 id。

<script type="text/x-handlebars" data-template-name="index">
  <p>{{eventName}}</p>
  <p>{{#link-to 'eventdetails'}}tell me about the details{{/link-to}}</p>
</script>

3) 不要尝试定义嵌套在 HTML 中的 Handlebars 模板。我不确定您是否这样做，因为您没有发布整个 HTML 页面，但每个模板都需要单独定义。