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应用程序？

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

更新2 使用所选答案中的解决方案1，我在我的另一篇文章中通过所选答案的指导实现并解决了我的问题： Answer

Answer 1

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

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

解决方案1 ：

确保Onsen UI接收的是纯HTML。你可以自由使用Jade，但是因为Onsen没有将Jade捆绑在里面，所以没有办法支持它开箱即用。然而，只要温森只看到HTML，它应该没问题。

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

在searchForTrainer.jade中，你似乎正在给它原始的玉，它不知道如何处理。您可以在服务器端处理此问题，确保searchForTrainer的请求返回html。从服务器而不是jade文件本身返回jade.renderFile('searchForTrainer.jade')应该可以解决问题。

解决方案2 ：

正如您所注意到的那样，只要内容在初始页面内，一切都会好的。因此，您可以将所有ons-template放在初始页面中。

如果您想保留当前的文件结构，可以执行

include searchForTrainer.jade

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

解决方案3 ：

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

然而，由于Onsen目前不提供用于切换模板引擎的官方API，因此我们现在使用的黑客攻击可能在将来中断。可能在不久的将来可能会实现这样的功能，但为了现在我们需要包含一些onsen的内部功能。

这是一个简单的例子。

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

此处还有一位工作人员Demo展示了这个解决方案。

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

选择哪种解决方案？

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

解决方案2 - 不是解决问题的最佳方法，但如果您只想让事情发挥作用，它可能是最容易使用的。一个减号是，你可以在开头加载所有模板，这可能不是很好。

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

OnsenUI通过分割器

1 个答案: