I am trying to get the object on itemTap in a ListView. I want to be able to have access to the name and age of the object. But I can't figure out how to do this in the onItemTap function
data
listOfItems: [{name: "Tom", age: 55}, {name:"Greg", age: 32}]
template
<ListView for="item in listOfItems" #itemTap="onItemTap($event)">
<v-template>
<Label :text="item.text" />
</v-template>
</ListView>
methods
onItemTap: function(args) {
???
}
See the docs
Template
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<!-- Shows the list item label in the default color and style. -->
<Label :text="item.text" />
</v-template>
</ListView>
Methods
onItemTap(event) {
console.log(event.index)
console.log(event.item)
}
Related
so following the documentation I created a Datepicker like
<div class="col-md-6" id="datepickercontainer">
<div x-data x-init="picker = new Pikaday({ field: $refs.datepicker,
format: 'DD MM YYYY',
disableWeekends: true,
bound: false,
container: document.getElementById('datepickercontainer'),
i18n: deutsch, }); $nextTick(() => picker.show())">
<input type="text" x-ref="datepicker" />
</div>
</div>
It works fine but when I add wire:model.lazy="date" to write the selected date to my Livewire Components public property, pickaday closes and does not open again when clicking the input...
I am getting an error while using ReorderHandle in reorderMode="Drag" in RadListView component of nativescript-ui-listview/vue like
[Vue warn]: Unknown custom element: <ReorderHandle> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
How can I use ReorderHandle in Nativescript-vue according to this doc link?
Any help on this functionality will be appreciated.
Here are my codes
main.js
import Vue from 'nativescript-vue'
import RadListView from 'nativescript-ui-listview/vue';
Vue.use(RadListView);
My Vue Component
<RadListView ref="listView" for="(manager, index) in managers" :itemReorder="true" reorderMode="Drag">
<v-template>
<Label>{{ manager.name }}</Label>
<ReorderHandle col="1" verticalAlignment="center">
<Image android:src="res://reorder_icon" ios:src="res://reorder-icon" stretch="none" verticalAlignment="stretch" margin="16" />
</ReorderHandle>
</v-template>
</RadListView>
There is an Vue example of that.
Like you can see in the code you don't need to add <ReorderHandle>
Example:
<template>
<RadListView ref="listView"
for="item in items"
pullToRefresh="true"
itemReorder="true"
swipeActions="true"
#itemTap="onItemTap"
#pullToRefreshInitiated="onPullToRefreshInitiated"
#itemReordered="onItemReordered"
#itemSwipeProgressStarted="onSwipeStarted">
<v-template>
<GridLayout columns="50, *" rows="*" class="item">
<Image :src="item.image" col="0" class="thumbnail" />
<StackLayout col="1">
<label :text="item.name" class="h2" col="1"/>
<label :text="item.description" class="p" col="1"/>
</StackLayout>
</GridLayout>
</v-template>
<v-template name="itemswipe">
<GridLayout columns="auto, *, auto" backgroundColor="White">
<StackLayout id="mark-view" col="0" class="swipe-item left"
orientation="horizontal" #tap="onLeftSwipeClick">
<Label text="mark" verticalAlignment="center" horizontalAlignment="center"/>
</StackLayout>
<StackLayout id="delete-view" col="2" class="swipe-item right"
orientation="horizontal" #tap="onRightSwipeClick">
<Label text="delete" verticalAlignment="center" horizontalAlignment="center" />
</StackLayout>
</GridLayout>
</v-template>
</RadListView>
</template>
More details can be found here.
I have a simple component that looks like this:
<script type="text/x-handlebars" id="components/Gd-text-input">
<label {{bind-attr for="name"}}>
{{label}}
</label>
<input type="text" {{bind-attr name="key" id="name"}} />
</script>
I would like to add the attribute type to the input field, and if no type is passed when including the component, like this for example:
{{Gd-text-input label="First Name" name="firstname" key="entry.810220554" }}
I would like it to default to type="text". How would I go about doing this?
Yep, you can subclass Ember.Component:
YourApp.GdTextInputComponent = Ember.Component.extend({
type: 'text'
});
moving from actionscript (flex) to titanium and I'm experimenting with the xml markup. What I have is a template that I picked up from the doc
<ItemTemplate name="template">
<ImageView left="0" bindId="pic" id="icon" />
<Label bindId="info" id="title"/>
</ItemTemplate>
</Templates>
my question is if someone clicks on the pic or a listitem itself, how does one handle the events. through xml markup? Then how do you reference any of the control wrap in the template?
I have tried
<ImageView left="0" bindId="pic" id="icon" onclick="doClick()" />
function doClick(e) {
alert($.info.text);
}
This just produces a error and I still would not know what pic was clicked.
any help would be great..
thanks Mike
Have you checked out the Alloy Quick Start? I think many of your questions can be answered there.
Anyway, for ListViews, you cant add an event listener to an item in the template, its just a template not an actual thing on the screen (yet), refer here, and look at the alloy section.
Instead you need the itemclick event listener on the ListView itself. Check , below for a simple example of what the XML markup looks like.
<ListView id="listView" defaultItemTemplate="template" onitemclick="yourEvent" >
<!-- The Templates tag sets the ListView's templates property -->
<Templates>
<!-- Define your item templates within the Templates tags or use the
Require tag to include a view that only contains an ItemTemplate -->
<ItemTemplate name="template">
<ImageView bindId="pic" id="icon" />
<Label bindId="info" id="title" />
<Label bindId="es_info" id="subtitle" />
</ItemTemplate>
</Templates>
<ListSection headerTitle="Fruit / Frutas">
<!-- You can specify any ListItem or ListDataItem properties in ListItem -->
<!-- Specify data to bind to the item template with inline attributes
defined as <bindId>:<Ti.UI.Component.property> -->
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
</ListView>
Also, you need any JavaScript to be in the controller files, not in the XML markup files. *.js has javascript that is behind the view, which is *.xml.
The application is written using ASP.NET MVC 3 in vs2010.
I have a knockout template that updates some css and visible bindings using a
dependantObservable.
The issue ONLY occurs when I bind the
value of the select element to the
IntervalID. If this is not bound the
UI is updated as expected.
I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.
The dependantObservable is called HasChanged.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>
<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
<script id="intervalTemplate" type="text/html">
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
<h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>
<script type="text/javascript">
function IntervalModel(data) {
var _this = this;
_this.IntervalID = ko.observable(data.IntervalID);
_this.Start = ko.observable(data.Start);
_this.End = ko.observable(data.End);
_this.IntervalTypeID = ko.observable(data.IntervalTypeID);
_this.OriginalStart = ko.observable(data.Start);
_this.OriginalEnd = ko.observable(data.End);
_this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);
_this.HasChanged = ko.dependentObservable(function () {
return !(_this.OriginalStart() == _this.Start() &
_this.OriginalEnd() == _this.End() &
_this.OriginalIntervalTypeID() == _this.IntervalTypeID());
});
}
var viewModel;
$(function () {
var viewModel = {};
viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
ko.applyBindings(viewModel);
});
</script>
Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.
Thanks!
There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133
The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.
So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.
Here it is working:
http://jsfiddle.net/rniemeyer/uDSFa/