how to using script block in layout
layout file:
<html>
-- styles files ---
<body>
<%- body %> <!-- view content -->
-- layout's scripts ---
</body>
</html>
view file:
--- html tags ---
view's scripts
=> i want view's scripts below layout's scripts but can't.
when i put script in layout, it is body, mean it will above of layout's scripts.
I don't known sailsjs have any way to define block like php laravel framework or not ? or any way to do it .
Thank you!
This is not exactly possible using the default asset pipeline.
Recommended workaround:
If you can, I'd actually recommend avoiding the issue altogether: instead, go in to your tasks/pipeline.js file and add the script you'd like to bring in there. That does mean it will be included on all pages (as a script tag in development, and in the minified bundle in staging/production). But in my experience, it is worth it for the clarity. (Plus, keep in mind that in production, you'll probably want all your scripts in a single bundle-- or most of them anyway.)
Another way:
If that still doesn't fit your needs, and you absolutely cannot have the script exist on other pages (e.g. because you're in post-production and are optimizing down the size of your bundle) then you can accomplish what you originally set out to do by modifying the Grunt tasks to support a different linker, or use another tool like Brunch, Webpack, or Gulp.
Or, if you (understandably) don't feel like customizing your Grunt tasks, then one other solution you might use is to add a script tag in layout.ejs, but wrap it in a conditional:
… (the automatically-injected scripts)
<script src="/dependencies/lodash.js"></script>
<script src="/js/utils/baz.js"></script>
<script src="/js/components/datepicker.component.js"></script>
<script src="/js/pages/foo/bar.page.js"></script>
<script src="/js/pages/beep/boop.page.js"></script>
… (etc)
<!--SCRIPTS END-->
<% if (view.path === 'pages/entrance/login') { %>
<!-- Additional script, since this is the login page: -->
<script>alert('hey!');</script>
<% } %>
BTW, you can also use something like the above to conditionally include Google Analytics, etc. so you're not tracking test requests as actual production traffic -- just check the environment (that's what we do on the Sails website, for example). This is also useful for conditionally including/omitting the robots/noindex meta tag (to prevent indexing duplicate content on your staging server), helpdesk chat widget, typekit, other analytics services, etc.
Related
I've been trying to use the vue-router package for days without figuring out how it works, and it kind of drives me crazy.
My problem: I want to make a Single Page Application using VueJS, and I have taken the vue-router package since it is the routing package officially supported by the VueJS development team.
I've read a lot of "getting started" articles, lots of them start by hard-writing the template like this:
const Foo = { template: '<div>foo</div>' }
But since I'm not really into writing my entire template between those two quotes marks, I searched for a way to write my template into a file, and then load the file's content into a JS variable.
It seems that it's possible to write the templates into .vue files, and then load them into variables using:
import App from './App.vue';
But when I do this that way I get this error: "Unexpected token import".
I'm really frustrated by that, haven't they thought about a really convenient way for the template loading to be compatible on every browser? What did I miss?
I suggest you look into Vue CLI for helping you set up a desired scaffold for your project. Based on the options you choose you can end up with a webpack backed template along with the vue-router included. Webpack will take care of bundling your project so you don't encounter errors like that one.
Generally what you want to do is use vue files. A vue file is divided into three parts, and would look something like this:
<template>
// Your HTML for this component goes here
</template>
<script>
// Your JS for this component goes here
</script>
<style>
// Your CSS for this component goes here
</style>
Once you have your components organized like this, handling routing is pretty straightforward. You designate a file to contain the router object that handles the routing.
These are pretty much basics, so I won't go into details here but you can learn a lot more on the official Vue docs page. Here is also an example project that shows how to construct simple components in vue files and how to properly use the vue-router.
We have been having discussions in our product dev team regarding html maintainability and reuse. To set the context, we started with HTML5/CSS3 front end with plain JS under Play MVC, which in turn uses RESTful backend. Then we thought of adding AngularJS to the spin and to adopting a hybrid approach only to realize that two strong MVC frameworks don't necessarily work together and you have to pick one. So for the performance and type-safety among other issues, we decided to go with using Play framework and Scala based templates.
Here's the challenge: We would like to create reusable web components just like Apache Tiles, so that common elements such as header, menus, footer, etc. can be reused. These components are ready to go in Play to which dynamic content could be added to serve the entire page.
Can this be done? If yes, how?
Secondly, play templates seem to take you back in the time since they don't allow the separation of concern in html. Therefore for re-designing or improving html content, the html developer will have to deal with the template or merging new html with existing templates. How to make this process easier?
I'm don't know exactly how Apache Tiles works, but if I properly understand, it offers a way to create pages using smaller components (like header, menu, footer, etc) and some sort of include mechanism to glue these components together and then compose the page.
That said, you can achieve the same thing using Twirl. You just need to declare reusable blocks that can be used inside the same page, or you can have something like Rails partials that can be reused across different pages.
Let's see an example. Consider that you have the following files:
File app/views/partials/header.scala.html:
<header>
<h1>My Header</h1>
</header>
File app/views/partials/navigation.scala.html:
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>FAQ</li>
</ul>
</nav>
File app/views/partials/footer.scala.html:
<footer>
Some copyright info
</footer>
File app/views/main.scala.html:
#(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
#partials.header()
#partials.navigation()
#content
#partials.footer()
</body>
</html>
The files above defines not only some reusable partial templates (header, navigation and footer), but also a common layout (main) that all the pages of your application can reuse. Now, lets see a page that uses the structure above:
File app/views/users/profile.scala.html:
#(user: models.User)
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username</h2>
}
And there is more: since views are compiled to Scala code, you can import code written in Scala/Java and call it directly from your views, something like Rails view helpers:
File app/views/helpers/DateHelpers.scala:
package views.helpers
object DateHelpers {
def formatToISO8601(date: Date) = {
??? // format the date
}
}
Let's use this helper in our app/views/users/profile.scala.html page:
#(user: models.User)
#import controllers.DateHelpers._
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username.</h2>
<p>User since #formatToISO8601(user.createdAt)</p>
}
And there are other approaches to consider:
Ping-Play: Big Pipe Streaming for the Play Framework
You can create a Play module that integrate with Apache Tiles. I'm pretty sure this is possible.
A quick answer would be the following. If you are comfortable with Yeoman, you can keep most of the UI part in existing HTML, while rendering some pages with Scala templates. I would recommend Play-yeoman, which may help such that you can--with minimum effort--reuse UI components.
For instance, you may easily convert a NodeJS+Angular app into Play+Angular. The Play-yeoman plugin helps a lot. But it is not so flexible as it does not support any arbitrary Yeoman configuration, just Angular.
I am somewhat new to AEM and Sightly. I have written a 'page' component to house my page content. I have a number of devices with different CSS under /etc/designs/myapp as follows:
/etc/designs/myapp
- /128/style.css
- /240/style.css
etc etc..
Back in my page component, I have a number of different HTML files that I use to trigger the correct CSS via a Sling selector. For example:
/apps/myapp/components/page
- 128.html
- 240.html
The purpose of these files is to include the HTML <head> section with the CSS as an inline style (cannot link to external CSS due to device limitations).
The problem that I am having is that if I place 128/style.css inside the component itself, the include works. If I have it under /etc/designs/myapp, I can't get it to include properly. I have tried using ${currentDesign.path # appendPath='/128/style.css'} and I have tried explicitly referencing the whole path.
Here is an example of 128.html, under the page component:
<html>
<head><!--/*
*/--><div data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap></div><!--/*
*/-->
<title>${currentPage.title}</title>
<div data-sly-unwrap data-sly-include="/etc/designs/myapp/128/style.css"></div>
</head>
<body class="main" role="document" data-sly-include="body.html"></body>
</html>
I realise that I need a <style></style> section wrapping any CSS that is included, but for now, I am just trying to get a page to include from /etc/designs.
Any help would be greatly appreciated.
From the definition of data-sly-include: https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html#include
data-sly-include: Replaces the content of the host element with the markup generated by the indicated HTML template file (Sightly, JSP, ESP etc.) when it is processed by its corresponding template engine. The rendering context of the included file will not include the current Sightly context (that of the including file); Consequently, for inclusion of Sightly files, the current data-sly-use would have to be repeated in the included file (In such a case it is usually better to use data-sly-template and data-sly-call)
It's not meant to be used for the type of inclusion you are trying to do since you are not calling any renderer. I think you should use client libraries and include your CSS files only, here is the documentation about this : http://blogs.adobe.com/experiencedelivers/experience-management/sightly-clientlibs/
You should define a client library category for each of your styles and call the right clientlib when you need it using <meta data-sly-call="${clientLib.css # categories='category.style.128'}" data-sly-unwrap></meta>
Hope this helps.
I'm using NetBeans as my IDE for a Ember.js project. When I create handlebars templates in my app like below the code highlighting doesn't work correctly.
<script type="text/x-handlebars">
<div>
</div>
</script>
Normally, when I'd select the first div, it and its matching end tag would highlight yellow, but this doesn't work. Since its inside the handlebars script tag both are highlighted red as errors and don't match together. This makes writing complex templates kinda annoying as it can be difficult to pinpoint syntax errors.
Is there anyway to get NetBeans to highlight inside the handlebars tag as if its regular html?
One option, until Netbeans implements this enhancement, is to add the following script tag in index.html immediately after your reference to jQuery:
<script src="js/libs/jquery.js"></script>
<!-- use following line to change script type to 'text/x-handlebars' -->
<script>jQuery('script[type="text/html"]').attr('type', 'text/x-handlebars');</script>
This is a variation of the answer provided by GCoda.
I had the same problem and tried various non satisfying fixes.
In the end I figured the best solution is simply to change the script's type attribute to text/html:
<script type="text/html">
<div>
</div>
</script>
I got same problem. And i just used a some kind of postprocessing, i am using node.js, so i did res.send(data.replace(/type="text\/html"/g,'type="text/x-handlebars"')); on my / page.
I think you can do something similar in you language, and ofcource this is not a fix, just an ugly trick to make developing more easy. Dont keep it in production.
Upon migrating my old web interface with extensive use of jQuery Tmpl, some of my templates have ceased to work. Further investigation shows that the templates not working are the ones starting and ending with TR tags (i.e. table rows getting appended to an existing table). The source text just gets removed by the jQuery Tmpl script! If I use the TR tags in a broader context like wrapped in a table etc everything works just fine, but as soon as they are used in an isolated template, they get wiped out.
working example:
<script id="workingTemplate" type="text/x-jQuery-tmpl" >
<table>
<tr><td>this works</td></tr>
</table>
</script>
not working example:
<script id="notWorkingTemplate" type="text/x-jQuery-tmpl" >
<tr><td>this does not work</td></tr>
</script>
The first example renders the full HTML code when checking with Firebug, the latter renders an empty SCRIPT tag.
The difference between the old and the new web interface that could in any way be related to the templating is a change from jQuery 1.5.2 to 1.8.2. I haven't tried running anything below 1.7.2 since this is where the .on() function got added, and the new framework has an extensive use of this method.
Are there any workarounds for this problems except the most obvious (= changing templating framework to something still maintained)?
EDIT:
When loading the template from a string, the content stays intact,
$.template( "tableRowTemplate",'<tr><td>this works</td></tr>');
$.tmpl("tableRowTemplate", data).appendTo('TABLE#mytable TBODY');
but is unfortunately no good for me since my templates are a tad more complicated than the examples (server side dynamics etc...). It does give some hints though. Obviously, it is the initialization of jQuery Tmpl that removes the content if it does not comply with something to me unknown. Maybe jQuery.fn.domManip?