How to choose class in Vue.js depending on multiple values? - vue.js

I'd like to choose class of an element bases on importance:
<strong> Importance:
<span :class="importance ? (calculate class here)">
</span> {{someText}}
</strong>
Let's say the class vlue should be imp0 ,imp1,imp2, imp3 or imp4, depending on whether importance equals 0,1,2,3 or 4.
You may ask why not calculate the value in a method function?
The answer is: to keep the class value synced with the result of a separate method which also gets importance as input parameter after the class is rendered.
So wondering how can I achieve this?
Update: I managed to do it with a convulted ternary conditional:
:class="importance==0 ? 'imp0': (importance==1? 'imp1': (importance==2 ? 'imp2': (importance==3 ? 'imp3': 'imp4')))
but wondering if there is a more clean way to do so?

If your mapping is that direct, you can let it go with simple expression:
:class="'imp' + importance"
... but I strongly advise you to at least consider it a technical debt. Remember, you can use any attribute in your CSS selector, not just classes.

Related

MDL Why the use of is-visible instead of --visible modifier

Asking on here as opposed to repo as per contributing.md.
I noticed that on most elements .mdl-layout__obfuscator for example an .is-visible class is added to make this object visible.
I was curious as to why you do not use a modifier to achieve this i.e:
.mdl-layout__obfuscator .mdl-layout__obfuscator--visible
Is there any particular reason for this?
Cheers.
Because state-classes are intended for elements, what can change his state. Those can have or not have this „--visible“ modifier.
See example to feel the difference between modifier and state class: http://www.sassmeister.com/gist/91bebd16ce4bbb7d6a45
Btw, canonical BEM doesn't have state classes, but some BEM realizations like SMACSS or Harry Robert's BEMIT — does. MDL is also a one of the BEM realizations, so you should not thinking about it like a mandatory rule.

structural search Intellij IDEA : Howto find occurrences of all classes extending another class

is there a way to search for all occurences of subclasses of a particular class ?
Say I have a class AbstractItem and I have got a lot of implementations of this AbstractItem class. Now I want to know where all subclasses are used.
Can I search for all occurences of all subclasses with a structural search pattern in Intellij IDEA ?
Thanks,
Detlef
The easiest way is use the following:
Search template:
$A$
Set Expression type (regexp) to AbstractItem and check the Apply constraint within type hierarchy checkbox (under Edit Variables...).
This will find all expressions with type or subtype of AbstractItem.

Spaces in CSS Selector-Webdriver

When i am trying to locate this below div with class name,i am unable to find,
<div class="large 20 columns">..</div>
i tried dr.findElement(By.cssSelector("div.large.20.columns']"));but unable to locate.
Please let me know, is there any way to locate class name with space using CSS Selector.
The problem here is that the "20" class expects you to use a class selector like .20, which is not a valid selector as CSS idents must not start with a digit.
This should work:
dr.findElement(By.cssSelector("div.large.\\20.columns"));
You also have '] at the end of your selector string for some reason. Was this a leftover from an attempt at using an attribute selector? If so, you should be able to get away with this as well but only if the page is guaranteed to have the class names in that exact order:
dr.findElement(By.cssSelector("div[class='large 20 columns']"));
Relying on layout-oriented class names like large is not a good idea in general. I would use just:
div.columns
If this is not enough to uniquely identify the element, I would additionally check for other attributes, specific parent, child or adjacent elements.
You are not able to find the element because of invalid class name. CSS class can not start with a number(20 in your case). Also, CSS class names can not have spaces as they are considered to be different classes.
Please refer to the explaination provided here and here

Aconcagua measure library - storing BaseUnits

What is the best practice to store base units?
Let's say I want to have a mile unit. So, I implement Number>>#miles, but what is the implementation?
The problem is that: (2 * (BaseUnit named: 'mile')) ~= (2 * (BaseUnit named: 'mile')), so it seems the mile base unit must be a singleton.
So I'd have something like:
Number>>#miles
^ self * Mile uniqueInstance
Am I on the right track, or can you think of a better way?
units are not really singletons but they use the original #= to see if two units are the same and the default implementation of #= verifies identity with #==, but that can be overridden if necessary.
The reason I did it that way is because I thought it was the most generic implementation. The easiest way to use them is to store units in global variables, therefore you can define:
Smalltalk at: #Mile put: (BaseUnit named: 'mile' etc etc).
And then you can do 2*Mile witch makes a lot of sense because... it is like saying that "the knowledge of mile is global"
Another way to do it is how Chalten does it. That is to have a class that knows each unit and you can access them with messages like "TimeUnits day"
The idea is to avoid having to create a class per unit that does not make any sense...
Another possibility is to 1) modify #= on Unit and use the uni's name to verify if two units are the equal 2) Subclass BaseUnit and do 1) :-)
If you have problems with Fuel, it is because you are not saving the root object that knows each unit, but once you do it the problem should be solved.
Hernan.
Yes the mile base unit must be a singleton, you can take a look at the Chalten framework which is using Aconcagua, in particular the TimeUnitsGlobal class.
For the Number method part, in Chalten it's done this way :
Number>>#daysMeasure
^TimeUnits day with: self
Although I have an issue with the way it's done there because I can't found a way to use Fuel with such units after that.

DoJo get/set overriding possible

I don't know much about Dojo but is the following possible:
I assume it has a getter/setter for access to its datastore, is it possible to override this code.
For example:
In the dojo store i have 'Name: #Joe'
is it possible to check the get to:
get()
if name.firstChar = '#' then just
return 'Joe'
and:
set(var)
if name.firstChar = '#' then set to #+var
Is this sort of thing possible? or will i needs a wrapper API?
You can get the best doc from http://docs.dojocampus.org/dojo/data/api/Read
First, for getting the data from a store you have to use
getValue(item, "key")
I believe you can solve the problem the following way. It assumes you are using a ItemFileReadStore, you may use another one, just replace it.
dojo.require("dojo.data.ItemFileReadStore");
dojo.declare("MyStore", dojo.data.ItemFileReadStore, {
getValue:function(item, key){
var ret = this.inherited(arguments);
return ret.charAt(0)=="#" ? ret.substr(1) : ret;
}
})
And then just use "MyStore" instead of ItemFileReadStore (or whatever store you are using).
I just hacked out the code, didn't try it, but it should very well show the solution.
Good luck
Yes, I believe so. I think what you'll want to do is read this here and determine how, if it will work:
The following statement leads me to believe the answer is yes:
...
By requiring access to go through
store functions, the store can hide
the internal structure of the item.
This allows the item to remain in a
format that is most efficient for
representing the datatype for a
particular situation. For example, the
items could be XML DOM elements and,
in that case, the store would access
the values using DOM APIs when
store.getValue() is called.
As a second example, the item might be
a simple JavaScript structure and the
store can then access the values
through normal JavaScript accessor
notation. From the end-users
perspective, the access is exactly the
same: store.getValue(item,
"attribute"). This provides a
consistent look and feel to accessing
a variety of data types. This also
provides efficiency in accessing items
by reducing item load times by
avoiding conversion to a defined
internal format that all stores would
have to use.
...
Going through store accessor function
provides the possibility of
lazy-loading in of values as well as
lazy reference resolution.
http://www.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/dojo-data-design
I'd love to give you an example but I think it's going to take a lot more investigation.