I have below code:
<template is="dom-if" if="{{item.hasAttach}}">
<i class="fa fa-paperclip"></i>
</template>
item.hasAttach = true/false
But I want to check condition in this if like :
item.content_format_code == 'PDF'
<template is="dom-if" if="{{item.content_format_code == 'PDF'}}">
<i class="fa fa-pdf"></i>
</template>
<template is="dom-if" if="{{item.content_format_code == 'JPEG'}}">
<i class="fa fa-jpg"></i>
</template>
<template is="dom-if" if="{{item.content_format_code == 'xls'}}">
<i class="fa fa-xls"></i>
</template>
it should be like {{item.content_format_code == 'PDF'}} = true/false
But it is not testing this.
I want to show icon as per file type. item.content_format_code == 'PDF' this is not checked true/false. In polymer it takes only true/false as a conditional actual value but don't check expression.
Please Help me.
You can use computed bindings.
Define a function that computes the expression and bind it to the dom-if.
<template is="dom-if" if="[[isFormat(item.content_format_code, 'PDF')]]">
<i class="fa fa-pdf"></i>
</template>
Polymer({
is: "my-element",
isFormat: function(code, format) {
return code === format;
}
});
Currently, polymer only supports simple constructs for conditions. This means that you can't write something like
[[ item.something == 'CONDITION' ]]
You are left with 2 choices:
The item used for the condition is a boolean, than simply writing
[[ item ]]
or
[[ !item ]]
will work. The only operator you can use is '!'
With more complex conditions, use computed bindings:
[[ _computeResult(item) ]]
I just did something similar and if you have access to your data it is much easier to just have a list of booleans like "is-PDF, is-JPG, is-PNG". Then you can just do;
<template is="dom-if" if="[[item.is-PDF]]">
That is what I ended up doing.
Related
This is my first ever project with ember.
I'm trying to render a language-changer component.
So far it renders ok, but I would like to append a spacer after each language as long and it is not the last one .
It should look something like
DE | FR | EN ...etc where | is actually a div
This is what I tried...
<div class="col-4 text-right language-changer">
{{#each languages as |lang index|}}
{{#if lang.isCurrent}}
<span>{{lang.designation}}</span>
{{else}}
<button {{action "changeLanguage" lang.key}}>{{lang.designation}}
</button>
{{/if}}
{{#if (index < languages.length)}}
<div class="spacer">|</div>
{{/if}}
{{/each}}
</div>
I read, that the if only works on properties... but how can I evaluate based on the current loop index?
What should I use instead of
{{#if (index < languages.length)}}
Thanks for the help.
Ember uses a logic-less template syntax. It does not many comparison operators by default. Especially there is nothing like a greater than comparison operator. There is not even an equals one. Basically you can only check if a variable or expression is truthy or falsy.
You have two options for your use case:
Add the separator unless it's the first item. You can check for the first item cause the index will be 0, which is falsy.
Use the addon Ember Truth Helpers, which provide a wide set of commonly known comparison operators.
As an alternative you could also write your own template helper that does a less than comparison but that would be reinventing the wheel as Ember Truth Helpers ships with such a helper.
I have question about Cypress.
I have an element on page which doesn't appear allways. There is no logic when it shows and when not.
Is in Cypress some IF/THEN function or something how do you check if the element is displayed (so fill it up) and when you don't see it than skip that step?
My code:
if (Cypress.$('[data-bind="validationElement: interestInsurable"]').length > 0) {
cy.get('[for="p4-conditional-csob-interest-insurable-1"]').click()
}
else {cy.get('#car-info-serie')}
This is how it looks like in playground:
Picture
And there is HTML of that checkbox:
<label class="z-radio z-radio-inline primary" for="p4-conditional-csob-interest-insurable-1" data-bind="popover: { content: VehicleInsuranceTooltips.conditionalDataCsobInterestInsurable1Tooltip }" data-original-title="" title="">
<input id="p4-conditional-csob-interest-insurable-1" name="p4-conditional-csob-interest-insurable" type="radio" class="custom-radio" data-toggle="radio" data-bind="checkedValue: 1, checked: interestInsurable" value="1">
<span class="icons">
<span class="icon-unchecked"></span>
<span class="icon-checked"></span>
</span>
Patří vozidlo zájemci o pojištění?
</label>
There is no built in way to do this in cypress. I am using this in my tests:
if (Cypress.$("#yourElement").length > 0) {
// element exists, do something
} else {
// element does not exist, do something else
}
You have to click on the input element instead of the label:
cy.get('#p4-conditional-csob-interest-insurable-1').click();
Anyways have a look at the Cypress Docs as conditional testing is strongly discouraged.
I try to do it like that:
{{#each item in controller.records}}
<li {{bind-attr class=":message (compare controller.currentUser.id item.user_id)::mes-self" >
.....
</li>
{{/each}}
And mes-self didn't add to class attribute. Is there possibility to do that?
I see 3 problems in your code:
You're using old {{each in}} helper. It's deprecated now.
You're using deprecated {{bind-attr}} helper.
You're using shorthand helper with {{bind-attr}} + :: and that's unlikely to work.
Instead, please try:
{{#each controller.records key='id' as |item|}}
<li class="message {{if (compare controller.currentUser.id item.user_id) '' 'mes-self'}}">
.....
</li>
{{/each}}
I'm assuming you're using Ember v1.13+ and {{compare}} expression was declared(you've created this helper) and it returns true if passed values are the same.
I have a Polymer code which goes this way
<template>
<template repeat="{{item in tasklist}}">
<paper-checkbox <template if={{item.isDone}}>checked</template> label="{{item.itemName}}"></paper-checkbox>
</template>
</template>
What I am trying to do is based on the variable isDone whose value is boolean, I want to add checked attribute in paper-checkbox.
I am not sure if that is the correct way to do it.
The JSON object that I am using is as follows:
tasklist: [
{
itemName : "Study",
isDone : true
},
{
itemName : "Cook Dinner",
isDone : false
}
]
Can anyone give me the correct way to do it?
Thanks in advance.
First of all, the HTML must be still valid. You can’t simply drop tags inside other tags. Fortunately, in this case you don’t need to use conditional templates and the following code does the trick:
<paper-checkbox role="checkbox" checked="{{ item.isDone }}">
</paper-checkbox>
Whether you still want to use conditional template, you might write:
<template if="{{ item.isDone }}">
<paper-checkbox role="checkbox" checked>
</paper-checkbox>
</template>
<template if="{{ !item.isDone }}">
<paper-checkbox role="checkbox">
</paper-checkbox>
</template>
Live preview: http://plnkr.co/edit/V9ZukBq4ia2pqBk55DqH?p=preview
Hope it helps.
Is it possible to have an if / else statement which does not render any html in a view similar to knockout:
<!-- ko if: someExpressionGoesHere -->
but it needs to be on an element
Yes, but if v-if conditional is false, it's not added to DOM tree.
HTML
<div id="main"></div>
JavaScript
new Vue({
el: "#main",
template: '<div v-if="name"><span v-text="name"></span></div>',
data: {
// name: "bob"
}
});
console.log(document.body.innerHTML);
// <div id="main"><!--vue-if--></div>
Still not good for you?
I know the question was already answered, but thought I would pass along something I use, now that I am writing sites with Vue (which I love.) I am a fan of Knockout and have many sites written in it using the:
<!-- ko if: someExpressionGoesHere -->
You could do a similar thing in Vue like this:
<template v-if="someExpressionGoesHere">
<p>Expression is True</p>
</template>
<template v-else>
<p>Expression is False</p>
</template>
The templates will not render anything to the page. The resulting html will be a single p of the 'Expression is xxx'.
I think it is a bit more clear of what the intent of the code is here than the actual answer to this post IMHO.
you can also use this way to write if else condition in vue.js
<template>
<div id="app">
<p v-if="someConditionHere">Condition True</p>
<p v-else>Condition False</p>
</div>
</template>