2014-11-20 113 views
0

我目前正在改造舊網站並添加了餘燼。以前,當用戶訪問產品>產品時,會有鏈接指向靜態頁面。服務靜態頁面ember.js

什麼是路由到這些靜態頁面的最佳途徑? (物品中的銷售單)

{ 
    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" 
    } 
+0

無需途徑有哪些?只是使用一個普通的'' – Jakeii 2014-11-21 08:52:30

+0

嗯,我可以做到這一點,但我希望靜態頁面在我的模板中呈現。 這是一個老項目,他們開發了一堆靜態頁面並將它們加載到模板內的iframe中。我想知道是否必須爲每個頁面製作一個路線,或者是否有更好的方法。 類別>產品索引>產品>銷售與產品關聯的工作表頁面的鏈接 – visualbam 2014-11-21 17:43:35

+0

編譯靜態html文件把手模板並將它們放入視圖中。 – 2014-11-24 19:00:04

回答

0

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

我最終只是在產品頁面底部的iframe中顯示靜態頁面。無論何時單擊查看更多,我都會用jQuery隱藏頁面,然後顯示通過錨標籤獲取加載的html的iframe。然後我添加了一個隱藏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(); 
    }); 
    } 
});