OnsenUI通过拆分器以文本形式加载页面 [英] OnsenUI loads page in text, via a splitter
问题描述
我以前已经创建了一个Web应用程序，现在我想将其与OnsenUI集成在一起，以使我的应用程序可以在所有移动设备以及Web上使用.
I have previously created a web app, and now I would like to integrate it with OnsenUI to enable my app to be used on all mobile devices as well as the web.
我在工具栏上使用一个拆分器，该工具将成为所有页面的标题，当用户单击其中的某个项目时，它将重定向用户到其他页面.单击主页项将成功重定向到主页(索引，该索引已正确加载).但是，单击拆分器中的任何其他项目都会将我重定向到请求的页面，但会以文本格式显示文件的内容，而不是实际呈现该页面.看起来像下面的一样，只是它们混杂在一起而没有空格:
I am using a splitter in a toolbar which will be the header of all pages, and it will redirect the user to other pages when they click an item in it. Clicking the home item successfully redirects to the home page (index, which is already loaded correctly). However, clicking any of the other items in the splitter redirects me to the requested page, but shows the content of the file in text format instead of actually rendering the page. It looks like the following, except it's all jumbled together with no spaces:
searchForTrainer.jade:
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的内容:
Here is the content of 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
这是我在角度文件中使用的拆分器加载页面功能:
here is the splitter load page function I am using in my angular file:
this.load = function(page) { console.log("The page is: " + page);
mySplitter.content.load(page)
.then(function() {
mySplitter.left.close();
});
};
有人用Jade成功构建了Onsen应用程序吗?
Has anyone successfully built an Onsen app using Jade?
UPDATE 当我将代码保留在html而不是jade中时，一切正常.当我将其转换回玉石时，它将再次显示为文本.
UPDATE When I leave the code in html instead of jade, everything works correctly. When I convert it back to jade it shows up as text again.
更新2 使用所选答案中的解决方案1，我在其他帖子上的所选答案指导下实现并解决了我的问题:
UPDATE 2 Using Solution 1 from the selected answer, I realized and solved my problem with the guidance from the selected answer on my other post: Answer
推荐答案
从外观上看，您似乎在服务器端使用了Jade.
By the looks of it you seem to be using Jade on the server side.
要解决该问题，我看到了两种可能的解决方案.
To solve the problem I see a couple possible solutions.
解决方案1 :
确保Onsen UI接收到的都是纯HTML.您可以自由使用Jade，但是就其本身而言，Onsen并未将Jade捆绑在其中，因此它无法开箱即用地支持它.但是，只要Onsen仅看到html，就可以了.
Make sure that whatever Onsen UI is receiving is pure HTML. You're free to use Jade, but as it stands Onsen does not have Jade bundled inside, so there is no way for it to support it out of the box. However as long as Onsen sees only html it should be fine.
ons-template(id='index.jade')最初起作用的原因实际上是因为当您提供页面时，实际上是在提供实际的html，因此，在onsen启动时，该模板的内容实际上是纯html.
The reason why the ons-template(id='index.jade') works initially is actually because when you serve the page you are actually serving actual html, so when onsen starts the contents of that template are actually pure html.
在searchForTrainer.jade中，您似乎正在给它未加工的玉，它不知道如何处理.您可以在服务器端进行处理，确保对searchForTrainer的请求返回html.从服务器返回jade.renderFile('searchForTrainer.jade')而不是jade文件本身应该可以解决该问题.
In searchForTrainer.jade it seems that you are giving it raw jade, which it does not know how to handle. You can handle this on the server side, making sure that the request for the searchForTrainer returns html. Returning jade.renderFile('searchForTrainer.jade') from the server instead of the jade file itself should solve the issue.
解决方案2 :
正如您所注意到的，只要内容在初始页面内，一切都会好起来的.因此，您可以将所有ons-template放在初始页面中.
As you noticed as long the contents are inside the initial page everything will be fine. So you could just put all your ons-templates inside the initial page.
如果您想保留当前的文件结构，可以这样做
If you want to retain your current file structure you can just do
include searchForTrainer.jade
，同时在文件本身中具有ons-template标记.这样最终结果将是一个页面，其中模板已转换为html.
while having an ons-template tag in the file itself. That way in the end the result will be a page with the template already converted into html.
解决方案3 :
最后的选择是提供原始的玉器文件，但是帮助Onsen理解Jade，以便它可以正确使用它们.为此，您需要包括jade.js并修改Onsen UI，以便它使用它.
The final option is to give the raw jade files, but help Onsen understand Jade, so that it can use them properly. To do that you need to include jade.js and modify Onsen UI so that it uses it.
但是，由于Onsen当前未提供用于切换模板引擎的官方API，无论我们现在使用的哪种hack将来都可能会中断.在不久的将来可能会实现类似的功能，但是为了做到这一点，我们现在需要包装一些onsen的内部功能.
However since Onsen does not currently provide an official API for switching template engines whatever hack we use now might break in the future. It's possible that in the near future a feature like that may be implemented, but in order to do it now we need to wrap some of onsen's internal functions.
这是一个简单的示例.
module.run(function($onsen) {
var old = $onsen.normalizePageHTML;
ons._internal.normalizePageHTML = $onsen.normalizePageHTML = function(html) {
return old(jade.render(html, {}));
};
});
这也是工作中的 演示 这种解决方案在行动.
And here's also a working Demo showing this solution in action.
注意:该演示程序实际上从一开始就检查评论// jade只是为了安全起见.
Note: that demo actually checks for a comment // jade at the beginning just to be safe.
选择哪种解决方案?
解决方案1-我认为这很有意义，因为它保留了明确的关注点分离.如果要更改模板引擎，则只能在一个地方处理. Onsen不需要知道您在服务器上使用的内容，只要它能得到所需的内容即可.
Solution 1 - I think this makes most sense as it retains a clear separation of concerns. If you want to change the templating engine it should be handled only in one place. Onsen does not need to know what you're using on the server as long as it gets what it wants.
解决方案2-不是解决问题的最佳方法，但是如果您只是想让事情正常工作，它可能是最容易使用的方法.一个缺点是，使用它可以在一开始就加载所有模板，这可能不是很好.
Solution 2 - Not the best way to solve the problem, but it may be the easiest to use if you just want things to work. One minus is that with it you would load all the templates at the beginning, which may not be very good.
解决方案3-尽管此解决方案可以工作，但我建议您避免使用它，因为在前端处理玉石会导致性能下降.如果您实际上决定不依赖服务器，则可能是一种选择.
Solution 3 - While this solution can work I would suggest avoiding it as handling jade on the frontend would result in poor performance. It's could be an option if you actually decide not to rely on the server.
这篇关于OnsenUI通过拆分器以文本形式加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
