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>
Related
I was making an app with NativeScript-Vue but v-on:keyup.enter="entered" doesn't work at Android. code is below.
File Structure:
TodoInput.vue:
...
<TextField v-model="newTodoItem" hint="Type what you have to do" width="70%" horizontalAlignment="left" v-on:keyup.enter="entered" />
...
methods: {
entered() {
console.log("entered");
}
}
...
2. Expected result:
If the "Done" key is pressed on keyboard, console.log("entered"); must execute.
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)
i fill data in the textfield when i press done on android keyboard it will enter the data in the tableviewrow but i dont know how?
i did it on button click
and second question is : i want to delete the data on button click whose
row has
hasCheck=true
i mean to say these rows on button click
index.xml
<TableView id="table">
<TableViewRow title="Capsicum" onClick="select"></TableViewRow>
<TableViewRow title="Beans" onClick="select"></TableViewRow>
<TableViewRow title="Spinach" onClick="select"></TableViewRow>
<TableViewRow title="Pizza" onClick="select"></TableViewRow>
<TableViewRow title="Burger" onClick="select"></TableViewRow>
</TableView>
<TextField id="textfield" class="insertField" hintText="Add ingredients"></TextField>
<Button id="addButton" title="Add" onClick="addRow" ></Button>
<Button id="removeButton" title="Remove" onClick="removeRow" ></Button>
</Window>
index.js file
function addRow(){
var myTextFieldValue = $.textfield.getValue();
var row=Ti.UI.createTableViewRow({title:myTextFieldValue});
$.table.appendRow(row);
}
function select(e) {
if (e.row.hasCheck) {
e.row.hasCheck = false;
} else {
e.row.hasCheck= true;
}
}
It's pretty simple if you properly follow the Appc Docs:
Answer for Query 1:
There's an event called return for TextField proxies which is called when you press Done button or Return button on iOS or Android. But the title of this Return button can be anything as specified here: Return Key Title
So, you have to make below changes in TextField node to make it work on pressing enter on keyboard, like this:
<TextField id="textfield" returnKeyType="Ti.UI.RETURNKEY_DONE" onReturn="addRow" class="insertField" hintText="Add ingredients" />
Answer for Query 2:
You will have to fetch all rows from table which is a bit lengthy because you cannot directly fetch rows from TableView, rather you will first need to fetch the first section of TableView & then rows from section.
Note: If you do not add any section in TableView, then by default Titanium adds a single section in TableView and add rows in this section. This is why you need to take care of getting the first section first.
Here's the code to delete all checked-rows on Remove button click.
function removeRow() {
// first get all sections of table which will be first section in your case
var sections = $.table.sections;
// perform this check to make your code error free when there are no rows added to tableview.
if (sections.length !== 0) {
var rows = sections[0].rows;
var totalRows = rows.length;
if (totalRows !== 0) {
// now delete all rows which has uncheck=true
for (var i=0; i<totalRows; i++) {
var tempCurrentRow = rows[i];
if (tempCurrentRow.hasCheck) {
$.table.deleteRow(tempCurrentRow);
}
}
}
}
}
Just a minor change in your adding code so that you don't accidentally add empty title rows:
function addRow(){
var myTextFieldValue = $.textfield.value.trim();
if (myTextFieldValue != "") {
$.table.appendRow( Ti.UI.createTableViewRow({title:myTextFieldValue}) );
}
}
Does interpolation work on event-binding? I tried the following without success:
<button type="button" click.delegate="${action}()">${action}</button>
action is a VM variable set to one of "edit","add","cancel". There exist VM functions: edit, add, and cancel.
I was having trouble trying to use interpolation with event-binding. I had much better luck referencing the VM as a function instead.
Say you had action as a property of your view model. You could set the value of that property to the correct method based on the model or some UI action, and then when the action is called as a method, the correct add/edit/cancel method is called.
inside the view-model (es6):
setAction(method) {
if(method === "edit") {
this.action = this.editMethod;
} else if(method === "add") {
this.action = this.addMethod;
} else {
this.action = this.cancelMethod;
}
}
editMethod() {
alert("edit");
}
addMethod() {
alert("add");
}
cancelMethod() {
alert("cancel/default");
}
inside the template:
<button click.delegate="setAction('edit')">Use Edit Method</button>
<button click.delegate="setAction('add')">Use Add Method</button>
<button click.delegate="setAction('cancel')">Use Cancel Method</button>
<button click.delegate="action()">action</button>
Jeremy Danyow provided the answer on the github issues forum for aurelia-binding.
<button click.delegate="$this[action]()">${action}</button>
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