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

Question

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

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

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 而不是 jade 中时，一切正常。当我将它转换回玉石时，它再次显示为文本。

更新 2 使用所选答案中的解决方案 1，我在另一个 post 上根据所选答案的指导意识到并解决了我的问题：

Answer 1

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

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

解决方案 1:

确保温泉 UI 接受的是纯净的 HTML。您可以自由使用 Jade，但就目前而言，Onsen 并未在内部捆绑 Jade，因此无法开箱即用地支持它。不过，只要温泉只看到 html 就应该没问题。

ons-template(id='index.jade') 最初工作的原因实际上是因为当您提供页面时，您实际上是在提供实际的 html，所以当温泉开始时，该模板的内容实际上是纯粹的 html.

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

解决方案 2:

如您所见，只要内容在初始页面内，一切都会好起来的。因此，您可以将所有 ons-template 都放在初始页面中。

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

include searchForTrainer.jade

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

的页面

解决方案 3:

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

然而，由于 Onsen 目前没有提供官方的 API 来切换模板引擎，我们现在使用的 hack 在未来可能会被破解。在不久的将来可能会实现这样的功能，但现在为了实现它，我们需要包装一些温泉的内部功能。

这是一个简单的例子。

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 - 虽然此解决方案可行，但我建议避免使用它，因为在前端处理 jade 会导致性能不佳。如果您真的决定不依赖服务器，它可能是一个选项。

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

OnsenUI loads page in text, via a splitter

angularjs

onsen-ui

pug