提供静态页面ember.js

我目前正在改造一个旧网站，并添加了灰烬。以前，当用户进入products>product时，有一个指向静态页面的链接

路由到这些静态页面的最佳方式是什么？（对象中的sellsheet）

---

我知道这不是最好的方法，但它符合我的需要

我最终只是在产品页面底部的iframe中显示静态页面。无论何时单击view more，我都会用jQuery隐藏页面，然后显示iframe，它通过锚标记加载html。然后我添加了一个“无视图按钮”，它隐藏了iframe并再次显示页面

HTML

<script type="text/x-handlebars" id="product">
    <div id="valueprop-container">
      <div class="centered">
        <div class="col-left"><img {{bind-attr src=image}} /></div>
        <div class="col-right">
          <h2>{{{name}}}</h2>
          <p>{{{description}}}</p>
          <ul>
            {{#each bullets}}
            <li><span>{{{content}}}</span></li>
            {{/each}}
          </ul>
          {{#if sellsheet}}
            <a href="{{unbound sellsheet}}" target="frame" class="orange-button sell-sheet-click">View More</a>
          {{/if}}
        </div>
      </div>
    </div>
    <div class="shadow"></div>
    <div class="sellsheet">
      <button class="expand">View Less</button>
      <iframe name="frame" width="100%" height="100%" allowfullscreen style="position: absolute; border: none;"></iframe>
    </div>
  </script>

---

不需要路线吗？只需使用一个常规的

，我可以这样做，但我希望在我的模板中呈现静态页面。这是一个老项目，他们开发了一堆静态页面，并将它们加载到模板内的iframe中。我想知道是否我必须为每一页制定一条路线，或者是否有更好的方法。类别>产品索引>产品>链接到与产品关联的销售工作表页面编译静态html文件把手模板并将其放入视图中。

<script type="text/x-handlebars" id="product">
    <div id="valueprop-container">
      <div class="centered">
        <div class="col-left"><img {{bind-attr src=image}} /></div>
        <div class="col-right">
          <h2>{{{name}}}</h2>
          <p>{{{description}}}</p>
          <ul>
            {{#each bullets}}
            <li><span>{{{content}}}</span></li>
            {{/each}}
          </ul>
          {{#if sellsheet}}
            <a href="{{unbound sellsheet}}" target="frame" class="orange-button sell-sheet-click">View More</a>
          {{/if}}
        </div>
      </div>
    </div>
    <div class="shadow"></div>
    <div class="sellsheet">
      <button class="expand">View Less</button>
      <iframe name="frame" width="100%" height="100%" allowfullscreen style="position: absolute; border: none;"></iframe>
    </div>
  </script>

App.ProductView = Ember.View.extend({
  didInsertElement: function(){
    var productPage = $('#valueprop-container');
    var sellSheet = $('.sellsheet');

    $('.sell-sheet-click').click('on', function(){
      productPage.hide();
      sellSheet.show();
    });

    $('.sellsheet').click('on', function(){
      productPage.show();
      sellSheet.hide();
    });
  }
});