When using jade, AngularJs and angular-translate I prefer to use the translate directive as an empty attribute.
But for some reason, when using empty attributes in Jade, instead of getting something like <tag translate OR <tag translate='', I'm getting <tag translate='translate'
How can I add an attribute without a value?
The answer is to use the {doctype: "html"} when using the Pug (before was Jade) template engine.
This option has been documented recently, but it does not states what is it for.
Bear in mind that since I'm just processing all the jade files using gulp, I don't care that much about partials and such things...
Caveats: as stated by #lmacsen at github:
This fail if you need to use that code into a partial html file.
I've come up with this answer after reading several other github issues in the project page.
https://github.com/pugjs/pug/issues/201#issuecomment-1530205
https://github.com/pugjs/pug/issues/1180
I'm Using .foo(bar="") and it produces <div bar class="foo"></div>.
Using .foo(bar) you will get <div bar="bar" class="foo"></div>.
I'm Using most recent versions of Pug (formerly known as Jade) and I'm also using Partial jade files.
Related
I have a .html which needs data inserted from svelte using ${} syntax. I haven't found any way to include that html without resorting to inserting as a string into the svelte component.
There is not much Svelte can do here, for Svelte to do it's thing it requires a compile step.
If it's possible to rename the .html file to a .svelve file and compile it like the other components, that would be preferable.
But when the html comes from an api that's not possible.
An option is to use Handlebars or another template engine to insert data from Svelte into the html. (but that resorts to inserting it as a string, see REPL)
A last option I can think of is to place a <div bind:this={el} /> and use DOM api's to create and manage the html (not recommended)
I tried to include a tpl file using smarty include file like this,
{include file='file_name.tpl'}
its not working for me. Is it needed to include path name.
Try to set path to templates before. So call setTemplateDir before rendering of your template.
More here: https://www.smarty.net/docs/en/api.set.template.dir.tpl
Also as I can see Smarty allows to specify full path to template file inside of include directive. So even this is possible:
{include file='file:/usr/local/share/templates/navigation.tpl'}
But personally I would not recommend you to use this approach and stick to setTemplateDir and consistent place for templates in your app.
Little more information on that topic: https://www.smarty.net/docs/en/resources.tpl
In version 1.0.0 of Webpack's html-loader, the interpolate option has been deprecated, in favour of preprocessor (according to their changelog). interpolate enabled interpolation syntax for ES6 template strings, allowing you to import other html partials inside html files like so:
<div>${require('./components/gallery.html')}</div>
This was the de-facto way to implement html partials with html-loader, as several stack overflow suggested this solution.
However, now that that flag has been deprecated, I'm struggling to figure out how to enable this using the preprocessor option. The example in their github page comes with a handlebards implementation, but you didn't need this in the previous version - with interpolation the require syntax it all worked out of the box.
Anyone managed to replicate this html partials setup with the latest version of html-loader?
I like to use jade template in express project.
And sometimes I face with these problems.
For example,
li: b PHONE
li +7 (914) 3164890
Can I put these codes in one line?
Is it possible in jade template?
If not possible, which html preprocessor do I have to use for this type of work?
For these kind of problems, you always have the option of falling back on standard HTML syntax. Pug accepts both HTML and Pug syntax in its template files, so <li>...</li><li>...</li> should be valid Pug code, as well.
I stumbled upon this code:
<a href="#" class="text1"{text2}>...</a>
What does the {text2} do? Later on, this HTML is replaced with:
<a href="#" class="text1" {text2} style>...</a>
Is there a way I can retrieve the text2 value with jQuery?
In some cases that code is input in, so scripts can actually easily identify a the line. Or in some cases can be an indicator for a database to retrieve and store data once it has been pulled.
Or it could be invalid markup, doubtful if the person knows what they are doing.
But without any other information or variables it is hard to say. But the most common is access for scripts within Php, Javascript, and even C#. Cause they can parse the HTML document and manipulate it. If those braces are used, and it is incorrectly it will cause a parse error.
Hopefully that sort of clarifies it.
Update:
Yes, jQuery can find it. It is a form of Javascript. You could implement something such as:
$(function() {
var foundString = $('*:contains("{text1}")');
});
There is a vast amount of data that addresses this for more detail.
It does nothing in HTML. It's actually invalid markup. Looks like maybe you have a template system that finds and replaces that before it gets rendered to the browser.
I know that in jinja2, a python templating system, brackets contain commands to the template engine, either as:
Hello, {{varName}}
or:
<ol>
{%for l in varList%}
<li>{{l}}</li>
{%endfor%}
</ol>
That's in jinja, but jinja has similar syntax to django templates, and many other template engines probably copy django's syntax also.
its used in angular js and are called expressions {{expression}}
AngularJS is a JavaScript framework. It can be added to an HTML page with a tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.