OnsenUI通過分離器在文本中加載頁面

Question

我之前創建了一個Web應用程序，現在我想將它與OnsenUI集成，以使我的應用程序可用於所有移動設備以及Web。

我在工具欄中使用了一個分隔符，它將成爲所有頁面的標題，當用戶單擊其中的一個項目時，它會將用戶重定向到其他頁面。單擊家庭項目成功重定向到主頁（索引，它已正確加載）。但是，單擊拆分器中的任何其他項目都會將我重定向到請求的頁面，但會以文本格式顯示文件的內容，而不是實際呈現頁面。它看起來像下列事項，除了這一切都沒有空格混在一起：

searchForTrainer.jade：

//-ons-template(id='searchForTrainer.jade') 
ons-page(ng-controller='SearchController' ng-init='showme = false; getAllTrainers();') 

ons-toolbar 
    .left 
    ons-toolbar-button(ng-click='mySplitter.left.open()') 
     ons-icon(icon='md-menu') 
    .center 
    | Search Trainer 

    // ***** I cut off the rest of the file for simplicity 
    // ***** I should still be able to see the toolbar if the page loads correctly 

這裏是index.jade的內容：

doctype html 
html 
    head 
    link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    link(rel='stylesheet' type='text/css' href='/stylesheets/jquery.datetimepicker.css') 
    link(rel='stylesheet' type='text/css' href='/stylesheets/ratings.css') 
    link(rel='stylesheet' type='text/css' href='/stylesheets/searchTrainerTab.css') 
    link(rel='stylesheet' type='text/css' href='/onsenui/css/onsenui.css') 
    link(rel='stylesheet' type='text/css' href='/onsenui/css/onsen-css-components.css') 


    block loadfirst 
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js') 
    script(src="https://code.jquery.com/jquery-1.12.3.min.js" 
     integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous") 

    script(src='/onsenui/js/onsenui.js') 
    script(src='/onsenui/js/angular-onsenui.js') 
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') 
    script(src='/angular/fitnessapp.js') 

    script(data-require='angular-credit-cards@*', data-semver='3.0.1', src='https://rawgit.com/bendrucker/angular-credit-cards/v3.0.1/release/angular-credit-cards.js') 

    script(async='', defer='', src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDcVf7YAPNwa8gUsMCOZNQZA31s5Ojf2n8&libraries=places') 



     body 
     ons-splitter(var='mySplitter', ng-controller='RootController as splitter') 
      ons-splitter-side(side='left', width='220px', collapse='', swipeable='') 
      ons-page 
       ons-list 
       ons-list-item(ng-click="splitter.load('index.jade')", tappable='') 
        | Home 
       ons-list-item(ng-click="splitter.load('searchForTrainer.jade')", tappable='') 
        | Search Trainer 
       ons-list-item(ng-click="splitter.load('searchForEvent.jade')", tappable='') 
        | Search Event 
       ons-list-item(ng-click="splitter.load('trainerAddEvent.jade')", tappable='') 
        | Create Event 
       ons-list-item(ng-click="splitter.load('userProfile.jade')", tappable='') 
        | Profile 
       ons-list-item(ng-click="splitter.load('addPayment.jade')", tappable='') 
        | Payment 
       ons-list-item(ng-click="splitter.load('userSettings.jade')", tappable='') 
        | Settings 
       ons-list-item(ng-click="splitter.load('trainerSignup.jade')", tappable='') 
        | Trainer Application 
       ons-list-item(ng-click="href='/logout'", tappable='') 
        | Logout 
      ons-splitter-content(page='index.jade') 

     ons-template(id='index.jade') 
      ons-page(ng-controller='MapController' ng-init='getEvents()') 

      ons-toolbar 
       .left 
       ons-toolbar-button(ng-click='mySplitter.left.open()') 
        ons-icon(icon='md-menu') 
       .center 
       | Fitness App 
       //-.right 
       a(href='https://www.paypal.com/webapps/mpp/paypal-popup', title='How PayPal Works', onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;") 
        img(src='https://www.paypalobjects.com/webstatic/mktg/logo/bdg_now_accepting_pp_2line_w.png', border='0', alt='Now Accepting PayPal') 

      //- google maps stuff 
      ons-input#pac-input.controls(type='text', placeholder='Search Box') 
      div#map.col-md-12 

      ons-bottom-toolbar 
       .center 
       | Fitness App 

     block scripts 
     script. 
      // ***** I cut out javascript related to Google Maps for simplicity 

這裏是分流加載頁面功能我在我的角度文件中使用：

this.load = function(page) { console.log("The page is: " + page); 
    mySplitter.content.load(page) 
     .then(function() { 
     mySplitter.left.close(); 
     }); 
    }; 

有沒有人成功使用Jade構建了一個Onsen應用程序？

UPDATE 當我離開HTML而不是玉的代碼，一切正常。當我將它轉換回玉石時，它會再次顯示爲文字。

更新2 從選擇的答案用方案一，我意識到，解決了我的問題，從選擇的答案指導我的其他職位： Answer

Answer 1

通過它你似乎看起來在服務器端使用Jade。

爲了解決這個問題，我看到了幾個可能的解決方案。

解決方案1 ​​：

確保無論溫泉UI被接受是純HTML。你可以自由使用翡翠，但是因爲它的原因，溫泉沒有捆綁Jade，所以它沒有辦法支持它開箱即用。然而只要溫泉只看到html，它應該沒問題。

ons-template(id='index.jade')最初起作用的原因實際上是因爲當您提供頁面時，實際上是在提供實際的html，所以當onsen啓動時，該模板的內容實際上是純html。

在searchForTrainer.jade它似乎是你給它原始的玉，它不知道如何處理。您可以在服務器端處理此問題，確保searchForTrainer的請求返回html。從服務器返回jade.renderFile('searchForTrainer.jade')而不是玉文件本身應該解決問題。

解決方案2：

正如你注意到，只要內容是初始頁面裏面的一切都會好起來的。因此，您可以將所有ons-template s放入初始頁面。

如果你想保留當前的文件結構，你可以做

include searchForTrainer.jade 

，同時具有文件本身在ons-template標籤。這樣最終結果將會是一個模板已經轉換成html的頁面。

解決方案3：

的最後一個選項是讓翡翠原文件，而且有助於瞭解溫泉玉，使其能正確地使用它們。要做到這一點，你需要包含jade.js並修改Onsen UI，以便使用它。

不過，由於Onsen現在不提供用於切換模板引擎的官方API，現在我們現在使用的黑客可能會在未來破解。在不久的將來，可能會實現類似這樣的功能，但爲了實現這一點，我們需要包裝一些溫泉的內部功能。

下面是一個簡單的例子。

module.run(function($onsen) { 
    var old = $onsen.normalizePageHTML; 
    ons._internal.normalizePageHTML = $onsen.normalizePageHTML = function(html) { 
    return old(jade.render(html, {})); 
    }; 
}); 

而且這裏也顯示在行動這個解決方案工作Demo。

注意：該demo在開始時實際上會檢查註釋// jade以確保安全。

選擇哪種解決方案？

解決方案1 ​​ - 我認爲這是最有意義的，因爲它保留了清晰的關注點。如果你想改變模板引擎，它應該只在一個地方處理。只要溫泉得到它想要的東西，溫泉不需要知道你在服務器上使用什麼。

解決方案2 - 不是解決問題的最佳方法，但它可能是最簡單的方法，如果你只是想讓事情發揮作用。一個減號就是，你可以在開始時加載所有的模板，這可能不是很好。

解決方案3 - 雖然此解決方案可以工作，但我建議避免它，因爲在前端處理翡翠會導致性能不佳。如果你真的決定不依賴服務器，這可能是一個選擇。