First I want render code is:
ul
li
a
the render result should be
<ul>
<li><a></li>
</ul>
then I add conditional:
ul
- if (temp == "blog") {
li.active
- } else {
li
- }
a
but the render result is
<ul>
<li.active></li>
<a>
</ul>
what's wrong with my code? How can I get the same render result as the first one?
Try this:
ul
- if temp === "blog"
li.active
a
- else
li
a
If you prefer not to duplicate the nested a, you can use:
ul
li(class = (temp === 'blog') ? 'active' : '')
a
Also useful for menu lists and tabs, you can inline nesting like this:
ul
li: a
li: a.active
li: a
// ...etc
Related
I have a list of hrefs that I need to check. I only need to make sure that none of them contains the string "creditcheck"
The html looks like this:
<div class="yiiTab clearfix content-right-side" id="clientinfotabs">
<ul class="tabs left-side-tabs">
<li>
<a reloadonclick="" loadurl="/index.php?r=foo/bar;id=12345&language=de" href="#foofoobar" class="active">Test<span class="tab-item-count">8</span></a></li>
<li>
<li>
<li>
<li>
.
.
.
</ul>
The general idea was this:
Get ul
Iterate through every li item
Get 'a' using .children()
Invoke href and compare to a string
I tried to iterate through the list and check the hrefs using several approaches. This is my latest attempt:
describe('check hrefs', () => {
it('check hrefs', () => {
cy.login()
cy.visit('url3')
cy.get('tbody > :nth-child(1) > .col-id-large').click({force: true})
cy.get('#clientinfotabs > ul')
.each(($el) => {
cy.get($el).children().invoke('attr','href').should('not.include','creditcheck');
})
})
})
That's what Cypress returns when I run this script:
AssertionError
Timed out retrying after 10000ms: object tested must be an array, a map, an object, a set, a string, or a weakset, but undefined given
cypress/integration/test2.spec.js:10:62
8 | cy.get('#clientinfotabs > ul')
9 | .each(($el) => {
> 10 | cy.get($el).children().invoke('attr','href').should('not.include','creditcheck');
| ^
11 | })
12 | })
13 | })
So you are really close. Instead of cy.get() you have to use cy.wrap(). And also you can directly loop over li using the selector #clientinfotabs > ul > li.
describe('check hrefs', () => {
it('check hrefs', () => {
cy.login()
cy.visit('url3')
cy.get('tbody > :nth-child(1) > .col-id-large').click({force: true})
cy.get('#clientinfotabs > ul >li').each(($el) => {
cy.wrap($el).invoke('attr', 'href').should('not.include', 'creditcheck')
})
})
})
lets say I have a large object of people. and I want to filter them by hair color and gender. Once the filtering has taken place - how can i display the total number of results?
here is some pseudo code to help explain:
Vue.filter('hairFilter', function(person, color){
return person.filter(function( item ){
return item.hair == color
})
});
Vue.filter('genderFilter', function(person, gender){
return person.filter(function( item ){
return item.gender == gender
})
});
<h1>Total Results: [TOTAL FILTERED RESULTS NUMBER HERE]</h1>
<ul>
<li v-for="person in people | hairFilter 'red'| genderFilter 'male'">{{person.name}}</li>
</ul>
Thanks in advance
You can use a computed property and $eval.
{
computed: {
filteredPeople: function () {
return this.$eval("person in people | hairFilter 'red'| genderFilter 'male'");
}
}
}
Then in your template do like:
<h1>Results {{ filteredPeople.length }}</h1>
<ul>
<li v-for="person in filteredPeople">{{ person.name }}</li>
</ul>
I have a list of category names that are written in Jade.
ul
li Discussion
li Movie
li Music
li Performance
li Dance
li Theatre
And I have some json, that shows what kind of categories are added to a specific event:
…
values: [
{
ordinal: 50469,
db_value: 626,
id: 50469,
value: "Discussion"
},
{
ordinal: 50470,
db_value: 623,
id: 50470,
value: "Dance"
}
],
…
I have a route, that gets the category values:
res.render("event", {
categories: data.result.properties.category.values
})
How can I achieve an outcome like this, that an if/else checks if the value equals the same thing that's in the li tag and by this adds a class .unactive, if it doesn't exhist in the json array:
<ul>
<li>Discussion</li>
<li class="unactive">Movie</li>
<li class="unactive">Music</li>
<li class="unactive">Performance</li>
<li>Dance</li>
<li class="unactive">Theatre</li>
</ul>
First, as Andrew did, i would simplify the data format. You could either do this in Node before sending it to the template, or using some JS in the template itself. I'll only edit the template here:
- categoryNames = categories.map(function(c){return c.value});
This will create an array of just the names. (And, it doesn't even need underscore.js. ;))
Now, you can simply check if a given name is in the array using indexOf():
ul
li(class=(categoryNames.indexOf("Discussion") > -1 ? "" : "inactive")) Discussion
li(class=(categoryNames.indexOf("Movie") > -1 ? "" : "inactive")) Movie
li(class=(categoryNames.indexOf("Music") > -1 ? "" : "inactive")) Music
li(class=(categoryNames.indexOf("Performance") > -1 ? "" : "inactive")) Performance
li(class=(categoryNames.indexOf("Dance") > -1 ? "" : "inactive")) Dance
li(class=(categoryNames.indexOf("Theatre") > -1 ? "" : "inactive")) Theatre
I would first massage the data a bit to a format that's easier to render, like this:
var _ = require('underscore');
var categoryNames = _.map(data.result.properties.category.values, function(value) {
return value.value;
});
// categoryNames is an array like this: ['Discussion', 'Dance']
res.render("event", {
categoryNames: categoryNames
})
Now you can get the behavior you're looking for like this:
ul
each category in categoryNames
li category
But if you really want to keep the "disabled" cateogry tags around, you can do it with an inline conditional like this:
ul
each category in ['Discussion', 'Movie', 'Music', 'Performance', 'Theatre']
li(class=(categoryNames.indexOf(category) === -1) ? "" : "inactive") #{category}
I have a list (xtype: 'list') and I use an XTemplate to customize it. It looks like this:
itemTpl: new Ext.XTemplate('<div>',
'<span style="display: inline-block; width: 100px">{itemName}</span>',
'<span style="display: inline-block; width: 100px">{price}</span>','</div>')
I would like to change the color of {price} (using css I guess) based on the previous and current value:
If [current value] > [previous value] color it green.
If [previous value] > [current value] color it red.
The price value is updated like this:
var itemList = Ext.getCmp('itemList');
var store = itemList.getStore();
store.getAt(i).set('price', currentPrice);
While i is the number of item (or row in the list) that is updated and currentPrice is the new value. This code is executed by a function that is called once every second.
I know there is an option to have conditions inside an XTemplate, but all the examples I saw compare the new value with a constant. How can I change the color of {price} by comparing the new value to the old one?
You may add 'color' property to store when the store has loaded/created or while it is filling/creating.
store.each(function(item, i) {
var previousItem = store.getAt(i-1);
if (previousItem) {
var previousPrice = previousItem.get('price');
var price = item.get('price');
item.set('color', (price > previousPrice) ? 'green' : 'red');
}
})
Then you can use property in template
itemTpl: new Ext.XTemplate('<div>', '<span style="display: inline-block; width: 100px; color: {color}">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>')
I want to select the record from the list box using text. how can i use the filter function to select the particular record. I will be having many options but i want to select the value which i want by checking the text (e.g Spanish). I dont want to select value by index becoz if i do that i wont be able to verify test, moreover list gets updated. kindly help. below r my html code.
<ul class="addList">
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Mandarin</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">English</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Spanish</li>
</ul>
Yea i can select the record by index. but i want something like selectbyvisibleText which is available in Selenium.
Finally got the solution. created a function SelectRowByCellValue and used to call it where ever i want by
SelectRowByCellValue(AGP.SkillList, Data.SkillSelect);
SkillList = element.all(by.css('Ul.addList li'));
SkillSelect = Value that u want to select. (Spanish)
this.SelectRowByCellValue = function (Elem, Texts) {
Elem.filter(function (element) {
return element.getText().then(function (text) {
if (text == Texts) {
element.click();
return false;
}
});
}).then(function (filteredElements) {
});
};