I'm using jade to template a report table as follows:
mixin report_row(row)
tr(data-id=row.c[keyIndex].v)
each cell, i in row.c
+cell_decorator(data.cols[i], cell)(data-foo="bar")
It's a nested mixin structure for a report row comprised of decorated report cells.
The problem is that the data-foo attribute is not being applied.
I've seen other issues on SO about mixin attributes but I cannot find any syntax issue with the template, it just renders while ignoring the attributes.
The documentation shows an example of passing attributes to mixins:
mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes.class, href=href)= name
+link('/foo', 'foo')(class="btn")
Notice that the mixin itself uses the implicit attributes name to refer to the passed attributes - in other words, the attributes aren't auto-applied, they are just sent as arguments into the mixin. You'll have to change the definition of your cell_decorator mixin to take the attributes into account.
If you want to simply apply the attributes on top of your mixin, you can use the &attributes syntax:
mixin cell_decorator(colname, data)
//- the `attributes` get applied to the td
td(...)&attributes(attributes)
+cell_decorator(data.cols[i], cell)(data-foo="bar")
Note that using &attributes like this (with a mixin call) is safe, as the values are escaped during the call.
Related
I've got a component called phrase, which is used like this:
<phrase *ngFor="let phrase of phraseList.phrases" [attachedPhrase]="phrase"></phrase>
Let's say now, I get one of these phrase components using jQuery. How do I access attachedPhrase?
[attachedPhrase] is not an attribute but property binding. It is supposed to be available only inside Angular application.
Although it's possible to access it as ng-reflect-* attribute, this can be recommended only for debugging purposes (this is the reason why these attributes are available in debugging mode only).
Considering that phrase is a string and attachedPhrase should be available both as component input and DOM attribute, it should be changed to attribute binding:
<phrase *ngFor="let phrase of phraseList.phrases" attachedPhrase="{{ phrase }}"></phrase>
Since attributes are case insensitive, it will be compiled to
<phrase attachedphrase="..."></phrase>
Property and attribute bindings can be interchangeable, but only if the expression is expected to be interpolated to a string.
Whenever possible, it's always preferable to not rely on DOM selectors and provide $(...) with actual reference to DOM element (nativeElement property of ViewChild or ElementRef element reference).
You can try: [attr.attachedPhrase]="'phase'".
Detailed info you can check out this site about Angular 5 directive.
Let's say I have this code
table(my-attr="value")
...complex component Jade...
and I would like render that my-attr base on property delivered into component. Since v-if works on whole element I cannot do something like
table(my-attr="value", v-if="myProp")
table(v-else)
because I would have to duplicate all the code inside table.
How can I achieve that?
You can use v-bind or interpolate the value directly with {{}}
// (sorry, no jade)
<table v-bind:attribute1="someMethod" attribute2="{{anotherMethod}}">
Now someMethod and anotherMethod should be data, computed properties, or methods of your component, and should return either the attribute's desired value or false. In the latter case, the attribute will not be added to the element at all.
Update: Note that interpolations in attributes have been removed in Vue 2
I'd like to pass the properties of an object as attributes of a component.
For instance, in the example below, I'm passing the object as an attribute column of the dynamic-table-column component.
<tr>
{{#each column in table.columns}}
{{dynamic-table-column column=column}}
{{/each}}
</tr>
But could I do it if I wanted the properties of the column object to be passed as attributes to this component? React.js, for instance has a notation for this: {...props}.
Update
To clarify, I'll be more explicit about my current situation. Right now I have to repeat every attribute explicitly, as in:
<tr>
{{#each column in table.columns}}
{{dynamic-table-column
title=column.title
alignment=column.alignment
sortable=column.sortable
formatter=column.formatter}}
{{/each}}
</tr>
Besides being too verbose, this has a fundamental flaw: imagine if a new attribute is added to the component in the future. We'd have to go over every place where this component is used, and add the new attribute explicitly.
React's JSX on the other hand, has a syntax for this purpose:
<DynamicTableColumn {...column}/>
That will assign each property in the column object to the attribute in the component with that same name. So if in the future the column object carries a new property, a new attribute will be assigned to the component, without having to change the template explicitly.
I hope this will make things clearer.
This is not currently possible in Ember (Sep 2015).
Handlebars syntax does not support what we've called a "splat" operator, inspired by Ruby. There is a proposal with some support on their repo.
HTML-syntax components, <my-component arg={{prop}} /> have not yet landed in Ember. When they do there will be an opportunity to introduce a helper for splat, ala <my-component {{attrs someHash}} />, however there is no specific proposal to track for this right now.
I am using autoform-ionic. I wanted to add an option to disable adding and removing from arrays on a afArrayField.
I use quickField which references afArrayField_ionic. I created a template with the same name in order to (hopefully) override it so I could add some of my own logic.
template(name="afArrayField_ionic")
// my custom code here
However, this gives me an error saying that there cannot be two templates with the same name.
How would one override a template to replace it with a different one?
I think you're looking for this: https://github.com/aldeed/meteor-template-extension
In Polymer 0.5, one could use the tokenList filter with expressions on an elements class attribute to apply classes conditionally based on object values. What is the v1.0 replacement or equivalent technique? I can't find anything on the subject beyond handling it entirely in code.
Polymer 1.0 made quite a few cuts in favor of performance gains, expressions being one of those.
Using the example from the 0.5 documentation:
<div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList}}">
You could re-write for 1.0 like so:
<div class$="{{getClassList(user.selected, user.type)}}">
Then in your element's js:
getClassList: function(selected, type) {
var classList = '';
if (selected) classList += ' active';
if (type == 'super') classList += 'big';
return classList;
}
Make sure that any properties that are subject to change (and that the resulting value depends on) are passed as parameters to the function. If these properties are updated, polymer will re-compute the value. Also make sure that each property passed to the function are initialized in some way -- Polymer won't compute the property if any arguments are undefined.
Another thing to be aware of is that any occurrence of {{}} must take up the whole attribute or text content, so you can't have things like class="foo {{bar}}". If you need to declaratively add a class name to your element, you could do something like this:
<div class$="{{getClassList('user-item', user.selected, user.type)}}">