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 - 虽然此解决方案可以工作，但我建议避免它，因为在前端处理翡翠会导致性能不佳。如果你真的决定不依赖服务器，这可能是一个选择。