OnsenUI 通过拆分器以文本形式加载页面

Question

我之前创建了一个网络应用程序，现在我想将它与 OnsenUI 集成，以使我的应用程序能够在所有移动设备以及网络上使用。

我在工具栏中使用了一个拆分器，它将成为所有页面的标题，当用户单击其中的项目时，它将重定向到其他页面。点击主页项成功重定向到主页（索引，已正确加载）。但是，单击拆分器中的任何其他项目会将我重定向到请求的页面，但会以文本格式显示文件的内容，而不是实际呈现页面。它看起来像下面这样，除了它们都混杂在一起，没有空格：

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

这是我在 Angular 文件中使用的拆分器加载页面功能：

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

有没有人使用 Jade 成功构建了 Onsen 应用程序？

更新 当我将代码保留在 html 而不是玉中时，一切正常。当我将它转换回翡翠时，它再次显示为文本。

更新 2 使用所选答案中的解决方案 1，我在另一篇帖子中的所选答案的指导下意识到并解决了我的问题： Answer

Answer 1

从外观上看，您似乎在服务器端使用 Jade。

为了解决这个问题，我看到了几个可能的解决方案。

解决方案 1：

确保 Onsen UI 接收到的任何内容都是纯 HTML。您可以免费使用 Jade，但就目前而言，Onsen 内部没有 Jade，因此无法开箱即用地支持它。但是，只要 Onsen 只看到 html 就可以了。

ons-template(id='index.jade') 最初起作用的原因实际上是因为当您提供页面时，您实际上是在提供实际的 html，所以当 onsen 启动时，该模板的内容实际上是纯 html。

searchForTrainer.jade好像是给它生玉，它不知道怎么处理。您可以在服务器端处理此问题，确保对 searchForTrainer 的请求返回 html。从服务器返回 jade.renderFile('searchForTrainer.jade') 而不是玉文件本身应该可以解决问题。

解决方案 2：

正如您所注意到的，只要内容在初始页面内，一切都会好起来的。所以你可以把你所有的ons-templates 放在初始页面中。

如果您想保留当前的文件结构，您可以这样做

include searchForTrainer.jade

同时在文件本身中有一个ons-template 标记。这样最终的结果将是一个模板已经转换为 html 的页面。

解决方案 3：

最后的选择是提供原始玉文件，但帮助温泉了解玉，以便它可以正确使用它们。为此，您需要包含jade.js 并修改Onsen UI 以便它使用它。

但是，由于 Onsen 目前没有提供用于切换模板引擎的官方 API，因此我们现在使用的任何 hack 将来可能会中断。在不久的将来可能会实现类似的功能，但现在我们需要封装一些 onsen 的内部函数。

这是一个简单的例子。

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

这里还有一个有效的Demo，展示了这个解决方案的实际应用。

注意：为了安全起见，该演示实际上会在开头检查评论 // jade。

选择哪种解决方案？

解决方案 1 - 我认为这是最有意义的，因为它保留了明确的关注点分离。如果你想改变模板引擎，它应该只在一个地方处理。 Onsen 不需要知道你在服务器上使用什么，只要它得到它想要的。

解决方案 2 - 不是解决问题的最佳方法，但如果您只想让事情正常运行，它可能是最容易使用的方法。一个缺点是你会在开始时加载所有模板，这可能不是很好。

解决方案 3 - 虽然此解决方案可行，但我建议避免使用它，因为在前端处理翡翠会导致性能下降。如果您真的决定不依赖服务器，这可能是一种选择。