How check if attributes is in declaration Polymer - attributes

Lets say I have a custom element defined as
<polymer-element name="my-elem" >
<template if={{show_is_in_my_declaration?}}>
....
</template>
<script>
Polymer('my-elem', {});
</script>
To use it I would like to declare it as...
<my-elem show></my-elem>
Where including 'show', makes the template appear; similar to how things like 'flex' or 'fit' effect the element. What is this called and how do I implement it.
note: I don't want to write something like show="{{true}}"


It's called Conditional Templates.
Here is the docs:
https://www.polymer-project.org/docs/polymer/template.html#if
and here are some examples on how to use them:
https://github.com/Polymer/TemplateBinding/tree/master/examples/how_to

Related

Dynamic partial naming in node.js using handlebars

This works fine:
<h1 class="uk-heading-line uk-text-center"><span>{{processNameUpper}}</span></h1>
{{> process-BUF-labels}}
but now I also want to use a dynamic partial naming like so:
<h1 class="uk-heading-line uk-text-center"><span>{{processNameUpper}}</span></h1>
{{> process-{{processNameUpper}}-labels}}
But sadly this is not allowed.
Is there any way without a complicated partial expression function?
And I really want to have the labels files in separate files.

How to declare variables in DUST?

I have a javascript code to declare a variable. i need a way to do the same in DUST??
<script type="text/javascript">
String flag = "ON";
</script>
how to do this DUST???

Dust is logicless template, so can't use logic like javascript. But if you want to using a variable as a flag, and you are using partials, you can add like this
{>partials flag='ON' /}
And in that partials you can use that variable.

Dust templates are meant to be logicless, so there would be no adding new variables from inside it. Ofcourse you can add properties to the object you pass to be rendered as variables.

Passing arguments from node.js to knockout.js through ejs

I have a node.js that consumes mongodb data and outputs lists using knockout.js
When i invoke the view i pass a json structure using
res.render('list', { items:json });
In the list.ejs template page i've defined a hidden element:
<input type="hidden" id="hidden" value="<%= items %>">
and in .js file i read its value:
var json=$("#hidden").val();
var tkts=jQuery.parseJSON(json);
var vm=new AppViewModel(tkts);
Well...it runs but i think (hope) there must be a better way do it ... is there a way to avoid a hidden html var, for example?

Currently I can think of three ways to do this.
1.) Assign the data to a variable in your JavaScript code:
<script type="text/javascript">solution1 = {"name": "solution1"}</script>
solution1
2.) Add a data-attribute to an element of your liking:
<div id="solution2" data-value='{"name": "solution2"}'></div>
JSON.parse(document.getElementById('solution2').dataset.value)
3.) Use the script tag and choose a different content type than text/javascript or application/javascript
<script id="solution3" type="script" type="text/json">{"name": "solution3"}</script>
JSON.parse(document.getElementById('solution3').innerHTML)
Live demo
http://jsfiddle.net/bikeshedder/sbjud/
Personal note
It might sound boring, but the first option is probably the best choice. It is fast, requires as little code as possible and just works. I don't see a reason why you would want to have your data in a string first if you can have it as JavaScript data right away.

You could add an inline script if you are serving up a full page... Of course this would pollute the global namespace.
<script>
var tkts = <%= items %>;
</script>
If you are using AJAX to get this page... then break it into two AJAX requests... one of them gets the template, and the other one can get the list of items (as a JSON request). They could run in parallel so it might even be quicker.

Un-render a template view with hogan.js

Is there any way to un-render a template with hogan.js. You can just hide it, but that leave's a lot of elements with id's and it can mess up further effects on your site.
I have looked around, but can't find an answer to this. Thanks

hogan.js is a templating language. What means that one can easly render different html markups just using some javascript object. It does not have the purpose of manipulating the DOM.
Lets say you got html like this:
<body>
...stuff...
<div id="div-1">...stuff...</div>
</body>
You could use of course jQuery:
$('#div-1').remove();
Or if it saves trouble you can use pure javascript:
var elem = document.getElementById('div-1');
elem.parentNode.removeChild(elem);

modx create layout with chunk and call with template

I'm using modx revolution. I'd like to create a chunk called layout that calls other chucks example
Head
header
nav
body
footer
then in my template do something like //open layout tag[[$layout]] [[$layout]]//close layout tag. then inside of the the open close tags append my [[*content]]. this would allow me to reuse my layout template over and over again without having to replicate it in the templates. First question, is it possible, second what kind of syntax would be needed to achieve this goal? I'm rather new to modx and know it's possible with other frameworks, so any help would be appreciated. Thanks.
Sample concept done in Apache Tapestry framework, obviously different syntax, but should give you the general idea of what I'm looking for.
components/Chunks used.
Layout
Header
Nav
Footer
Inside of layout
<html>
<t:Header/>
<t:Nav/>
<t:Body/>
<t:Footer/>
</html>
Inside of Index/Template
<t:Layout>
template body content goes here ex. [[*content]]
</t:Layout>
Hope this helps to clarify.

Your post is not very clear and I think you haven't really taken much time to read up on how MODx works before looking for help.
That aside, I think what you want to do is create different templates, structured more or less like this:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[$footer]]
That might do for your home page, then for internal pages where the layout is a bit different you can create one or more new templates for each layout:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[$sidebar-chunk]]
[[$footer]]
You can even show different layouts using a single template something like this:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[*parent:is=`6`:then=`
[[$recent-articles]]
`:else=`
[[$sidebar-chunk]]
`]]
[[$footer]]
That should get you started, but you'll soon realise there are multiple ways to do everything in MODx.

You can put your [[*content]] where-ever you want, even inside another chunk, if that's what you mean.
So your [[$layout]] chunk could just be this:
[[$header]]
[[$menu]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
If you want to make some minor changes in a chunk on a template-basis you could also do something like this in the template:
[[$layout? &customContentBits=`
<h1>[[*pagetitle]]</h1>
[[*content]]
`]]
and your layout chunk could then be something like this:
[[$header]]
[[$menu]]
<div id="content">
[[+customContentBits]]
</div>
That's a placeholder ([[+customContentBits]]) which is set by adding the &customContentBits in the chunk call.
Explained that a tad more with a different use case on my blog some time ago too: http://www.markhamstra.com/modx-blog/2010/10/introducing-element-properties-and-output-modifier/

What you are asking can absolutely be done. In fact, on my website, I even have the same template/chunk combo providing multiple layouts by passing a template variable as a chunk modifier. But anyhow, let's keep things simple.
A quick note on your question., ModX doesn't use start tags and end tags, natively. It's best to stop thinking that way. Instead just place things where you want to place them. Resource variables can go in any chunk, as each resource is unique.
Create your Chunks:
First, start with the simple ones. Create your Header, Footer, and Navigation. Next, create your Body. Inside the Body, make sure to include your [[*content]] (no... it doesn't have to go into the Template. Finally, create your Layout with the following code:
[[$header]]
[[$navigation]]
[[$body]]
[[$footer]]
Create your Template:
Your template can now be as simple as [[$layout]]. You're done.
Note
While you can do this with ModX, understand that the power of ModX is that you can have multiple templates and chunks depending on the type of content you have. Singularizing everything like this really takes away a major advantage of using the platform.

Mark Hamstra more or less gave you the answer, but just to clarify: Any snippet, chunk or output of some sort in Modx can take parameters. Chunks and snippets especially can make use of these params easily. From what i understand you want to have all your templates call [[$layout]] and nothing else.
The layout chunk in turn looks like
[[$header]]
[[$navigation]]
[[$body]]
[[$footer]]
On this you simply build and add your params, nesting them down from the top like
[[$layout? &useNavigation=`1`]]
(And continue passing the param in your layout chunk)
[[$header]]
[[+useNavigation:is=`1`:then=`[[$navigation]]`]]
[[$body]]
[[$footer]]
Another way of accomplishing the same behaviour would be to use a single template to which you have connected a series of template variables that decide how the template looks like. You might have template variable called useNavigation of checkbox type. If you check this through the resource editor it will be passed to your $layout chunk directly without having to add params into the $layout chunk call.
[[$layout]]
(Just call layout normally and add the TV checks to the layout chunk directly.
Note the difference between calling a TV and a placeholder, + vs *)
[[$header]]
[[*useNavigation:is=`1`:then=`[[$navigation]]`]]
[[$body]]
[[$footer]]

Resources