How to integrate pugjs (jade-lang) with Ember-CLI? - ember.js

I'm new to npm.
I downloaded ember-cli to design an application but also I want to install pugjs to render the html.
so .. I don't have to write a lot of unnecessary html code .
so is there any way to to integrate pugjs (jade-lang) with Ember-CLI.
Thanks in Advance.

You need to add Broccoli Jade compiler and loaded here for more information check the following resources:
1- https://github.com/sindresorhus/broccoli-jade
2- https://www.npmjs.com/package/generator-ember-jade-zurb-express //Yoeman generator which may help you to scaffold your project.
However, I strongly recommend you to use emblemjs. An overview of the project is :
p Introducing Emblem.js: a new templating language
that compiles to Handlebars.js
ul
li Indentation-based (like Slim, Jade, HAML, etc.)
li Compiles to Handlebars
; full compatibility with
both custom and built-in Handlebars helpers
li Ember.js-friendly syntax and full compatibility
with auto-updating functionality.
/ Emblem is HTML5-aware; Render HTML if a line starts with
known HTML tag, else invoke HB helper or perform property lookup.
These defaults are easily overridable when necessary.
ul
each person in people
li = person.name
section.ember-features
/ easy, natural Ember bindAttr support
h1 class=foo The class name of this element is bound to `foo`
p class=isActive:flashing:inactive Ember.js bound css classes
/ implicit Ember action handlers
a click="doIt" href="#" Hello, how are you doing, #{name}?
/ condense nested content into a single line if that's how you roll
#footer: ul.menu-items: each menu_items: li: a.menu-link href=url: link_text
if something
p something was true!
else
p something was false!

Related

What does "templating languages like HTMLBars" mean? what is HTMLBars? A language?

I never heard it before. Does "templating languages like HTMLBars" related to Ember.js?
I will try to explain it.
There is the templating engine and language called handlebars. The language is a superset of (X)HTML, so can use all HTML and some specific things in curly brackets that will be replaced by the handlebars templating engine. This works full on string replacement. So you compile your handlebars template with the handlebars compiler and get a Javascript function that will take an Javascript Object and produce an HTML string by replacing the handlebarsparts.
HTMLBars on the other side is a full HTML parser. Its based on the handlebars templating language, but is actually capable of understanding your HTML code. As far as I know it does not completely support HTML/SGML so the HTMLBars language is a subset of the handlebars language.
Because of its knowledge of the HTMLPart HTMLBars is capable of directly building a DOM rather then an HTML String. This is faster then injecting the string into the browsers rendering engine, and allows more features. For example since HTMLBars ember templates are able to updates attributes like <img src={{myUrl}} />. This wasn't able before, because handlebars didn't know if a placeholder is in a Tag or not. So until HTMLBars you was required to do `.
HTMLBars is also the base of the current ember templating engine called Glimmer.

How do I teach WebStorm 9 inspector to recognize Angular Material Design tags/attributes?

Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: "Attribute [name] is not allowed here".
How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this.
UPDATE:
Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.
You need to add the angular-material.js file as a Library in WebStorm:
Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)
Go to Languages & Frameworks > JavaScript > Libraries
Click Add and then press the + icon
Find angular-material.js in your node_modules folder
Add a Name and a version and press Ok
Now you will have completions for all elements and attributes that have an #ngdoc documentation in the angular-material source code.
Usage
Start typing and you will see the completions:
Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
Important note
Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no #ngdoc for them:
var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").
Environment
Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.
I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.
You maybe need to add the Library:
File
Settings
Languages & Frameworks
Javascript
Librarys
Add here AngularJS
If this does not work, you can add them manually:
Follow this Steps:
File
Default Settings
Editor
Inspection
HTML
Unknown HTML tag attributes
To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.
I highly recomend you to install the Angular.js plugin:
Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
Select Plugins in the window that'll open;
Click in the Browse Repositories button;
Type AngularJS in the search field. Select the plugin;
Click Install Plugin.
The plugin is incumbed to read #ngdoc annotations present in ngMaterial sources and create documentation for their directives.
It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...
Anyway, this is what you get:
You have also a plugin that helps a lot, check it out. It helps a lot
Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates
And with the solution provided by #Alex Ilyaev gives a lot of help.
But its no perfect.
Hope it helps.
Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.
It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.
For now you will have to add the attributes af custom attributes in order to get a "green" page.

Script Precompile Handlebars Templates in Script Tag

I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.

What a better way to handle templates in Ember.js, that isn't putting them in <script> tags?

So I'm building an Ember.js application. I've got more than two routers now, so it's becoming a lot harder to justify putting all these templates in index.html as <script> handlebars.
I can't seem to figure out how to have handlebar templates outside of the html! The other thing is that I'd like to avoid more dependencies if possible. So no pipeline, grunt libraries, or similar.
So to clarify:
I already stuff templates in index.html via <script> tags, I don't like it.
I don't want to jump back 20 years and put HTML in strings inside my javascript.
AJAXing static views seems ridiculous.
Without adding anything to the stack I don't see how you could do it other then putting them in index.html or in code one way or the other.
With adding stuff to your stack you should probably read this: answer by Yehuda Katz himself.
You could compile your templates in code like so:
App.View = Em.View.create({
template: Em.Handlebars.compile('{{outlet}}');
});
or if you are extending the view:
App.View = Em.View.extend({
defaultTemplate: Em.Handlebars.compile('{{outlet}}');
});
or you could register them like so
App.register('template', 'ViewName', Ember.Handlebars.compile(template));
The best way I've found so far is to use a command line tool like Grunt. You set the paths where your templates are (so you can organize your handlebars files nicely), and grunt will automatically compile all the views into a single, minified JS file that you can include, whenever you create or modify a template.
Because your templates are already compiled you can ship your application with a much smaller version of handlebars.
You can see an example of a configured Grunt file for that here : https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

RenderComponentPresentation before any other markup Tridion Razor Page

I have a page template in Tridion 2011 with Razor code that prints information based on RenderComponentPresentation() as the first thing in the page. No other markup comes before it, because the component, not the page, contains the initial markup. Unless I put at least one character before the first RenderComponentPresentation in the published output, the template refuses to render any presentations.
So, for example, if this is all that is in the layout TBB this works (in my real code the tcms are real of course):
<
#RenderComponentPresentation("tcm:mytcm","tcm:myothertcm")
but this does not
#RenderComponentPresentation("tcm:mytcm","tcm:myothertcm")
The first prints the contents of the component preceded by the "<", whereas the second does nothing at all. I don't want to have ANY markup directly at the start of the page template, I want the first thing to be the component. Is it possible?
I've just done a quick test in Template Builder using the latest version of the Razor Mediator (1.2) and couldn't replicate your issue.
Maybe you could try:
<text></text>
#RenderComponentPresentation("tcm:mytcm","tcm"myothertcm")
It won't render any additional markup but may trick the mediator into doing what you want (though like I said, I can't replicate your problem so can't verify whether it does).
Normally with Razor you iterate over any and all Component Presentations on the page, and right now I'm working with
#foreach(var cp in ComponentPresentations){
#cp.RenderComponentPresentation()
}
This will render every component on the page, regardless of predefined schema's or templates. Your issue however suggest a problem elsewhere. What kind of output does your page template generate (do mind its the page template using a compound template which in turn includes the Razor TBB you describe here). Is it .aspx, HTML or other? And what is the Component templates' output? is it an HTML fragment, or anything else?
As far as you syntax goes, that should be just fine other than the template invocation:
#RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx")
I have a feeling this code only works when used within HTML tags, though, but that's just a hunch.
Bit of a hack but have you tried:
<text>#RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx")</text>
or
#Html.Raw(RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx"))
Disclaimer: not really used Razor mediator. Just Razor.