I want to get Image element with id='item' on created.
I can't seem to find anything on google. Most of the tutorial on the internet is using Typescript and always start with page=args.object
export function pageLoaded(args) {
page = args.object;
item = page.getViewById("item");
}
You can use refrences for this.
Sample xml:
<StackLayout ~body class="body" row="1">
or:
<StackLayout ref="body" class="body" row="1">
Sample code:
mounted() {
let body = this.$refs.body;
}
As mentioned in the comments of the other answers:
<StackLayout ref="body" class="body" row="1">
mounted() {
let body = this.$refs.body;
}
Also you can access the nativeView by accessing it's property: let
nativeLayout = this.$refs.body.nativeView;
In NativeScript-Vue the nativeView of a ViewComponent is the wrapper element of the actual native platform (iOS/Android) element/view.
For example the nativeView of the ref="body" is the StackLayout of the tns-core-modules and it has a nativeViewProtected property which is the actual native framework element (on iOS UIView and android.view.View on Android)
Related
I cannot find selectionStart in Ionic 4 when I am referencing ion-textarea. In Ionic v3 I did something like this to get cursor position:
for iOS textArea._native.nativeElement.selectionStart
and for Android event.target.selectionStart
but it seems like I cannot find selectionStart on elementRef.
I tried to access element using
#ViewChild('txArea', { read: ElementRef }) textArea: ElementRef;
and
<ion-textarea
#txArea
[(ngModel)]="description"
(keyup)="onKeyUp($event, txArea)"
rows="4"
autocorrect="on" autocomplete="on"
placeholder="Enter description (i.e. #JoeDoe, #forehand)">
</ion-textarea>
Can somebody help with this?
Thanks
I think you're looking for this:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
MouseEvent.clientX
MouseEvent.clientY
You can use querySelector() on the nativeElement.
Assume that you are trying to access the view child reference using an instance variable as follows:
#ViewChild('txArea', {static: false, read: ElementRef})
txArea: ElementRef;
You can get selectionStart from an event handler (class method) as follows:
onClick () {
console.log(
this
.txArea
.nativeElement
.querySelector('textarea')
.selectionStart
)
}
I found a way to get the real input in Ionic
onKeyUp($event, txArea){
const realInput = $event.target.querySelector('input')
const start = realInput.selectionStart;
const end = realInput.selectionEnd;
}
this way you can get selectionStart and selectionEnd
I wanted to see how easily A-Frame and Vue can work together.
One of the example I met with a google search is this fiddle: https://jsfiddle.net/baruog/23sdtzgx/
But I didn't like the fact that, to change the properties of the a-box in the example, the functions needed to access the DOM.
Like, for example, in this function:
setBoxColor: function(color) {
document.querySelector('a-box').setAttribute('color', color)
},
So, I wondered, can I bind the attributes of the a-box and change them without accessing to the DOM?
And I changed the code as in this other fiddle: https://jsfiddle.net/fy83wr49/
that I copy below:
The HTML
<div id="vue-app">
<a-scene embedded>
<a-sky color="#000"></a-sky>
<a-entity camera look-controls wasd-controls position="0 1 3" rotation="-15 0 0"></a-entity>
<a-box v-bind:color="color_box" v-bind:opacity="op_box" v-bind:visible="v_box"></a-box>
</a-scene>
<p>Click a button to change the color of the box</p>
<div>
<button #click="setBoxColor('red')">Red</button>
<button #click="setBoxColor('blue')">Blue</button>
<button #click="setBoxColor('green')">Green</button>
<button #click="setVisibility(true)">True</button>
<button #click="setVisibility(false)">Flase</button>
<button #click="changeOpacity()">Opacity</button>
</div>
</div>
And the JS
Vue.config.ignoredElements = ['a-scene', 'a-sky'];
var colorButtons = new Vue({
el: '#vue-app',
data: {
color_box: "magenta",
v_box: false,
op_box: 0.5,
},
methods: {
setBoxColor: function(color) {
this.color_box = color;
},
setVisibility: function(isVisible) {
this.v_box = isVisible;
//document.querySelector('a-box').setAttribute('visible', isVisible)
},
changeOpacity: function() {
this.op_box += 0.1;
if (this.op_box > 1.0) this.op_box = 0.0;
}
}
})
What happens is that both the "color" binding and the "opacity" binding work properly, but the "visible" binding doesn't.
Initially I thought that maybe the bindings were supposed to work only with standard html attributes, and it working with the "color" attribute of the a-box was just a coincidence caused by a name collision.
But then I checked the html attributes list here https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes and "opacity" isn't listed, so I had to abandon that explanation.
Does anyone have an idea of the reasons that make only the first two bindings work?
According to a-frame docs: https://aframe.io/docs/0.8.0/components/visible.html#updating-visible - it seems that visible is a special attribute which needs to be updated using object3D or setAttribute on the element. Actually they call it 'component' visible - not an attribute, while opacity and color seems to be just an attributes. Simple vue binding seems to not work to 'visible component'.
I need to add one char the the TextField while also typing in. I get typed chars from View Model Object.defineProperty getter/setter. What do I should do?
I would recommend going through this article in order to receive better answers. One important thing is to show us a code you are working with and what you have tried so far.
As for the question - are you trying to create two-way binding?
if so this is the basic scenario to do it with a text-field:
page.ts
import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";
var vm = new Observable();
vm.set("msg", "default message");
export function navigatingTo(args: EventData) {
var page = <Page>args.object;
page.bindingContext = vm;
}
page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<StackLayout>
<TextView hint="" text="{{ msg }}" editable="true" />
<TextField hint="" text="{{ msg }}" />
</StackLayout>
</Page>
how can I get the slide event for slider ? I tried
slider.on('slide', function(){
console.log('slide!');
});
and
slider.on('change', function(){
console.log('slide!');
});
but it doesnt work :(( Thanks in advance.
Bind the slide value to an observable object and then listen to the propertyChangeEvent of that object.
Example
Given you have an XML looking like this:
<Page loaded="pageLoaded">
<StackLayout>
<Slider value="{{ sliderValue }}" />
</StackLayout>
</Page>
Then you can write your binding and event like this:
var observable = require("data/observable");
function pageLoaded(args) {
var page = args.object;
var viewModel = new observable.Observable();
viewModel.set('sliderValue', 42);
page.bindingContext = viewModel;
viewModel.on(observable.Observable.propertyChangeEvent, function(propertyChangeData){
//Do your magic here
});
}
exports.pageLoaded = pageLoaded;
Data bindings and Observable Objects are key parts of NativeScript. I highly recommend reading the documentation and get yourself familiar with them:
https://docs.nativescript.org/bindings.html
https://docs.nativescript.org/ApiReference/data/observable/HOW-TO.html
I am developing an app in Metro using HTML+Javascript. My links are not working when they are used to create a link in a img tag:
<h4>Go to child page</h4>
<img src="/images/home/child.jpg" />
The first link works OK and the second does not. When I click the image, it blocks the app.
For the links, I'm using a Application.PageControlNavigator as suggested in the documentation. My JS has:
(function () {
"use strict";
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
WinJS.UI.Pages.define("/pages/home/home.html", {
ready: function (element, options) {
WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
WinJS.UI.processAll();
}
});
})();
The problem is that the link.href returns the src string instead of the href string when having the tag used inside the tag . In your case the link.href returns "/images/home/child.jpg". I asssume this is a bug and not a feature. The workaround is not to use the href.link.
You can do this:
Use the onclick property of the <a> tag and call a handler() function as shown below:
<a onclick="handler();"><img src="/images/home/child.png" /></a>
Body of the handler function is as shown below:
function handler()
{
WinJS.Navigation.navigate('/pages/childpage.html');
}
Worked fine for me.
By blocks, I assume you mean "hang"? Is it calling your linkClickEventHandler when you click the image?