服務靜態頁面ember.js

Question

我目前正在改造舊網站並添加余燼。 以前，當用戶瀏覽產品>產品時，從那里有一個指向靜態頁面的鏈接。

路由到這些靜態頁面的最佳方法是什么？ （對象中的銷售表）

{
    id: 32,
    room: "String",
    subroom: "String",
    category: "String",
    image: "Content/Images/Products/img.PNG",
    name: "String",
    description: "String",
    bullets: [
        { content: "String" },
        { content: "String" },
        { content: "String" }
    ],
    sellsheet: "Content/Sellsheets/conveyor.html"
  }

Answer 1

我知道這不是最好的方法，但它符合我的需求。

我最終只是在產品頁面底部的iframe中顯示了靜態頁面。 每當您單擊“查看更多”時，我都將使用jQuery隱藏頁面，然后顯示iframe，該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>

視圖

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();
    });
  }
});