I observe some very strage behavior. When using {{#if}} inside a div class tag:
<div class="gallery-row {{#if helper}}class2{{/if}}">
I get the following DOM fragment:
<div class="gallery-row <!--data:Hb4bubiKDcedk9Z85-->">
I have similar {{#if}} clauses in other class definitions. When I use the {{#if}} outside the div tag it seems to work fine. I guess I did some silly mistake or there is a bug here.
The comment is a spark (meteor's templating system) annotation, which don't work well inside HTML tags (as html comments are invalid inside them). This is known issue, see: https://github.com/meteor/meteor/issues/800.
Move your helpers outside the tags.
{{#if helper}}
<div class="class1 class2">
{{else}}
<div class="class1">
{{/if}}
Or create a helper for classes and use <div class="{{classes}}"> instead
Related
I'm about to start a new project using Aurelia and I'm considering to use it in conjunction with CSS BEM methodology.
First question: Is this basically considered a good match or are there any alternatives which "fit" better with Aurelia?
Main question:
Best explained with an example for some custom Aurelia view (an app header):
<template>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
When embedded into another view, this leads to a resulting DOM like this (simplified):
<app-header>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu>
<!-- ... -->
</app-menu>
</div>
</app-header>
Obviously, the wrapper div with the AppHeader class is kind of superfluous since there's also the app-header tag. Unfortunately it doesn't seem to be possible to assign the CSS class AppHeader (which is needed for BEM) to the base element of the view (the template tag in the view file).
Are there any alternative ways that I'm not aware of or is it considered "good" practice (or at least acceptable) to have many wrapper elements inside views which somehow bloat the DOM?
I just realized, that putting custom classes on the custom elements themselves (the template) actually works, so I can simply write something like this:
<template class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</template>
Edit / Additional info
This won't work if the view is a "base view" of a route since the template element won't be rendered at all in this scenario but is replaced by the router-view element.
I believe that even a hundred extra DOM nodes is not a problem for contemporary browsers but if it's really important to avoid them you may try custom tags instead of classes (see list of restrictions here https://en.bem.info/methodology/faq/#why-are-custom-tags-not-used-for-blocks-in-bem).
Perhaps the #containerless will solve your problems:
In your view model:
#containerless
export class AppHeader {
...
}
In this way, the <app-header> container will not be rendered.
If your component is a view-only component, you can declare containerless in the <template> tag:
<template containerless>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
I'm trying to use a EmberJS handlebar texture element and conditionally add a css class to it. Code looks like this:
{{textarea class={{if isBlue 'blue-css' 'green-css'}} }}
This does not work. The inner handlebars expression is inserted literally into the html, but I can use an html textarea:
<textarea class={{if isBlue 'blue-css' 'green-css'}} ></textarea>
How can I do this using an EmberJS handlebars expression, if at all?
Thanks
You can try,
{{textarea classNameBindings="isBlue:blue-css:green-css"}}
as explained here docs
<template name="userPill">
<span>{{Zipcode}}</span>
<span>{{City}}</span>
</template>
The above template is being used for a meteor autocomplete. What I need is a vertical scrollbar on a container that is around the list, so a user can scroll through these values. Would appreciate any help.
Thanks
The template tag does not exist in the DOM, so you can't rely on it for CSS. If you need to target that template specifically (as opposed to adding generic classes to its elements), your best bet is to wrap its contents in a div like so:
<template name="userPill">
<div class="user-pill">
<span>{{Zipcode}}</span>
<span>{{City}}</span>
</div>
</template>
Then you can target it in your css:
.user-pill {
color: red;
}
In larger projects, I prefer to use a double underscore to identify class names for templates, e.g. <div class="__user-pill">. It may look a little ugly but I find it's really helpful to figure out what's going on.
Based on your comment, it looks like you need to style the container of a userPill. Let's say you have a template like this:
<template name="userPillContainer">
<div class="user-pill-container">
{{> userPill name="home"}}
{{> userPill name="about"}}
{{> userPill name="profile"}}
</div>
</template>
Then you can target the container in the same way as above:
.user-pill-container {
border: 1px solid black;
}
I'm trying to do some templating for the site I'm working on the make it more reusable. To do this I'm using knockout to help with data-binding to transfer info from a json fine.
However, I'm having quite a bit of trouble passing a css property object to a span element within my template.
My html template kind of looks like this
<div data-bind="cssProperties: properties, css: { hidden : EvalDisplay() == false }">
<p>
<!-- ko foreach: options -->
<label class="btn">
<input type="checkbox" />
**<span class='optionText' data-bind="cssProperties: $parent.properties, html: Value"></span>**
</label>
<!-- /ko -->
</p>
</div>
The span with the asterisks next to it is what's giving me trouble. If I move that outside of the foreach loop then it works fine and the property is added, but if I keep it inside that loop where I need it to be it's just not being applies.
Any help would be great. I am very new at knockout so I don't know all the cool little tricks yet.
And before you ask, yes the css property has to be in the json and not in a css sheet. It needs to be where non-technical people can access it to change it.
Meteor seems to skip CSS transitions when these are triggered through a template helper.
Is there a way to work around this?
Example:
<template name="example-template">
<div class="example {{myhelper}}"></div>
</template>
Then, "myhelper" would get assigned, through a template helper, a classname that triggers a css transition. But, for some reason, the class is applied but skipping the transition.
I assume this conflicts with Meteor's auto-rendering when the template data sources change, but I don't know how to get around it (I'd like to avoid using jquery for this).
CSS transitions after rendering a new template aren't yet supported by Meteor. The reason is that when rendering the template example-template again, the new HTML is just appended to the DOM with the new classname. Since the DOM changes, the transition doesn't happen.
Your best bet is to use the rendered event in combination with a loading classname:
<template name="example-template">
<div class="example loading"></div>
</template>
Template['example-template'].rendered = function() {
// remove the loading classname here, and have that trigger a transition
}
This is supposed to get easier after new Meteor UI lands (see http://www.youtube.com/watch?v=pGQ-ax5cFnk), but until then you can do this with a preserve directive for your template:
HTML:
<template name="example">
<div id="example-div" class="example {{myhelper}}"></div>
</template>
JS:
Template.example.preserve(['#example-div']);
See http://docs.meteor.com/#template_preserve for more info.