If I use <Label text="Welcome {{ username }}" /> no username appears.
Literally "Welcome {{ username }}" is visible - plaintext appears.
However using just <Label text="{{ username }}" /> works as intended, the username is passed.
I can work with this but am wondering if this is normal and if I'm doing it wrong.
Using plain JS with NativeScript, not angular or typescript.
This won't work:
<Label text="Welcome {{ username }}" />
It should be: <Label text="{{ 'Welcome ' + username }}" />
Related
Not sure if this is default behavior but I'm trying to build a component in Vue and trying to add attributes like id & class but is not present in the rendered code.
Component
<template>
<input type="text" name="hello" />
</template>
Usage (named md-input)
<md-input class="hello" />
<!-- this will render too wihtout the class attr -->
<input type="text" name="hello" />
Normally, attributes are passed onto the root element of the component, as seen in this
demo.
But that can't happen when there are multiple elements in the component, and you'd see a warning in the browser's console:
[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <MdInput class="hello" >
at <App>
For that scenario, you could pass on any attribute bindings to the inner input using v-bind="$attrs":
<template>
<label for="hello">My Input</label>
<input type="text" name="hello" v-bind="$attrs" />
</template>
demo 2
That's a weird behavior, what if you put a default class on the component's template?
<template>
<input type="text" name="hello" class="default" />
</template>
<md-input class="hello" />
<!-- The element should be render like this -->
<input type="text" name="default hello" />
How to display an image from local file?
This code doesn't seem to work.
<Image
source={{
uri: 'file:///data/data/com/files/image.png',
}}
/>
<Image
source={{
uri: require('file:///data/data/com/files/image.png'),
}}
/>
For more details visit https://reactnative.dev/docs/images
if the image is in the local system then instead of the following below
<Image
source={{
uri: 'file:///data/data/com/files/image.png',
}}
/>
try simply
<Image
source={require('file:///data/data/com/files/image.png')}
/>
I'd like to load the right icon based on active light or dark theme.
<NavigationButton icon="res://ic_menu" tap="{{ showSlideout }}" />
Any suggestions?
This will use icon ic_menu or ic_menu2 based on is_dark variable's true/false value which can be changed somewhere as part of bindingContext observable
<NavigationButton icon="{{is_dark? 'res://ic_menu':'res://ic_menu2'}}" tap="{{ showSlideout }}" />
and if that won't work try this way, where you will bind variable for use in expression
<NavigationButton icon="{{is_dark , is_dark? 'res://ic_menu':'res://ic_menu2'}}" tap="{{ showSlideout }}" />
I'm new in Nativescript.And how I call javascript function when binding? I try try like method below, but get empty result.
<Repeater items="{{ Match }}">
<Repeater.itemTemplate>
<StackLayout>
<Label text="{{ SubStringMatch(MatchNo) }}" />
<Label text="{{ DateTime }}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
function SubStringMatch(value) {
return value.substring(1);
}
exports.SubStringMatch= SubStringMatch;
From the code you posted, I believe, you are trying to convert a number value into a string. This could be achieved by using a converter function. You can read more about it in {N} documentation.
Radio Button checked item should be true based on entry.isalbum value. Below is my View code..
#foreach(abc.Models.ddt entry in entrydetails)
{
#if(entry.isAlbum=="Album")
{
<input type="radio" id="c" name="isAlbum" checked="checked" value="Album" />
<label style="margin-right:10px" for="c"><span></span>Album</label>
}
<input type="radio" id="c1" name="isAlbum" value="Movies" />
<label style="margin-right:10px" for="c1"><span></span>Movies</label>
<input type="radio" id="c2" name="isAlbum" value="Single" />
<label style="margin-right:10px" for="c2"><span></span>Single</label>
</div>
}
}
foreach loop contain value stroed in database corresponding to Album, Movies or Single.
radio button checked should be true based on entry.isAlbum vale. How can we do this, please help to us? I have three radiobutton mention in above code. Radio Button checked will be true based on entry.Isalbum vale. Please help me
Try this:
<input type="radio" id="c" name="isAlbum" #if(entry.isAlbum=="Album"){<text>checked="checked"</text>} value="Album" />
<input type="radio" id="c1" name="isAlbum" #if(entry.isAlbum=="Movies"){<text>checked="checked"</text>} value="Movies" />
<input type="radio" id="c2" name="isAlbum" #if(entry.isAlbum=="Single"){<text>checked="checked"</text>} value="Single" />