I'm trying to dynamically set the class of a listview item template:
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<h1 class="semanticZoomItem-Text" data-win-bind="innerText:title;class:contains"></h1>
</div>
But data-win-bind fails to do anything when 'class' is present as a property-name.
Is there a correct way to styling specific items in a listview if indeed I can't change the class with data-win-bind?
You need to set the JavaScript class property, which is not called "class", but "className".
Related
I can't seem to find a functionality similar to v-for, but for attributes.
I'd like something like:
<div><data-attrs v-for="item in myattrlist">data-{{item.name}}="{{item.value}}"></data-attrs></div>
which would then render to
<div data-name1="value1" data-name2="value2"></div>
My search-fu is insufficient to find how this can be done.
You can pass an object to v-bind and the attribtues will be assigned from the object,
Example from Vue docs:
<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
In your case it would be something like this,
<div v-bind="myattrlist.reduce((attrObj, attr) => ({...attrObj, ['data-' + attr.key]: attr.value}), {})"></div>
Though I'd suggest creating the attrObj in the data() method rather than in the template
I have this stucture in my parent Component:
<div class="section" >
<VRVideoPage :isActive="false"></VRVideoPage>
</div>
Via a third-party tool it's possible that the "section"-div gets a css class named "active" added.
I now want to toggle the ":isActive" property on the VRVideoPage component to true, whenever the active class is applied to its parent.
Is this achivable via the vue template syntax?
You can try like this but it is not a good practice and may not work:
<div class="section" >
<VRVideoPage ref="video" :isActive="$refs.video.$el.parentNode.classList.contains('active')"></VRVideoPage>
</div>
I am using materialized range:
<div class="range-field col s6">
<input type="range" id="test5" min="0" max="100" #ranger (input)="yourMethod(ranger.value)"/>
</div>
This input creates in HTML span tag with class thumb, how could I change the color dynamically by changing the range? Is it possible to define in css .thumb {background-color: somevariable}, and change it from the component?
You can dynamically set the color in html through a variable defined in the component.
<p [style.color]="variable"></p>
define the value of variable in component. But make sure you have a default value defined otherwise it will throw an error.
I have this div in my Field.vue component template:
<div class="field"
:class="{
'has-bomb': field.hasBomb && field.isOpen,
'is-open': field.isOpen,
'is-marked': field.isMarked
}"></div>
Now I have a computed that creates a String based on field.x and field.y like this:
computed: {
cssClass () {
return `x${this.field.x}-y${this.field.y}`
}
}
How can I add that generated String as a CSS class to my div?
I tried
<div class="field"
:class="{
'has-bomb': field.hasBomb && field.isOpen,
'is-open': field.isOpen,
'is-marked': field.isMarked,
cssClass
}"></div>
and also
<div class="field"
:class="{
'has-bomb': field.hasBomb && field.isOpen,
'is-open': field.isOpen,
'is-marked': field.isMarked,
cssClass: true
}"></div>
but that just gives me
<div class="field cssClass"></div>
instead of what I need, e.g.:
<div class="field x3-y10"></div>
For this approach, Vue provides so called the Array Syntax class binding, which allow using static or dynamic classes inside an array which is passed to the dynamic html attribute.
For example:
<div :class="['static-class', computedClass, {'dynamic': obj.enabled}]">Test</div>
**REQUIRED IN COMMENTS by #webnoob:** It is also good to know that is possible to use both pure html `class` with vue dynamic `:class` even though in HTML is not valid to use 2 same attributes ([read more in specifications][2]), moreover, nowadays if you try to use multiple same attributes, browsers will just ignore them. But in our case with vue it works because all the dynamic classes will be merged together with the static ones and at the end the element will contain only one class attribute.
Working example:
<div :class="myClass" class="row">Test</div>
But is not possible to use two of the same style (i.e. two dynamic or two static)
Not working example:
<div class="a" class="b"></div> or <div :class="a" :class="b"></div>
This generates errors.
WinJS allows you to bind HTML properties dynamically at run-time, similar to XAML binding.
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
<h3 data-win-bind="innerText: timestamp"></h3>
</div>
How if I want to also bind the font color style for <h3> as well, how do I achieve that?
Unlike the data-win-options binding which makes use of {key:value,key2:value2} syntax. data-win-binding uses a syntax similar to inline-css styles.
Using property:bindingValue;property2:bindingValue2 etc will allow you bind multiple properties to the same HTML control.
As an example to answer the question above:
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
<h3 data-win-bind="style.color: fontcolor; innerText: timestamp"></h3>
</div>
Lets say you want to switch between green and red color if the timestamp is "important", and you have a field "isImportant" in your model:
HTML:
<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
<h3 data-win-bind="innerText: timestamp; style.color: isImportant MyConverters.colorConverter"></h3> </div>
Then you could use an converter to return the preferred color depending on the boolean isImportant like this:
JS:
WinJS.Namespace.define("MyConverters", {
//Converter function
colorConverter: WinJS.Binding.converter(function (important) {
return important ? "Green" : "Red";
})
});