I am trying to use swipe events to obtain iphone like toggle switch. i want to handle swipemove and swipeend events. For example:
<div class="xyz" {on swipemove {fn:"swipemoveHandler"} /}> </div>
is working as expected while,
<div class="xyz" {on swipeend {fn:"swipeendHandler"} /}> </div>
is throwing error "The event type: 'swipeend' is an invalid event type."
I am using AT1.3.7 and any help in this regard is greatly helpful.
Thanks in Advance
You can use 'swipe' event of Aria templates which is triggered after a swipe is completed.
Please refer to sample below. This was included in AT 1.3.4
swipeHandler : function (event) {
event.preventDefault(true);
document.getElementById("touchMe").style.visibility = "hidden";
document.getElementById("swipeDirection").innerHTML = event.direction;
document.getElementById("swipeDistance").innerHTML = event.distance;
document.getElementById("swipeLength").innerHTML = event.duration;
document.getElementById("swipeStartX").innerHTML = event.startX;
document.getElementById("swipeStartY").innerHTML = event.startY;
document.getElementById("swipeEndX").innerHTML = event.endX;
document.getElementById("swipeEndY").innerHTML = event.endY;
return false;
}
Below you can see how event can be attached to an element
<div id="touchboard"
{on swipe {
fn : this.swipeHandler,
scope : this
}/}
>
<!-- your content -->
</div>
Refer to link for more help http://snippets.ariatemplates.com/samples/github.com/ariatemplates/documentation-code/samples/utils/touch/swipe/
Related
I have run into a roadblock on a project where everything seems to be working fine except that I can't seem to add a click handler on a v-for loop object.
Here's the demo code that is structured very similarly to my original code
<template>
<article>
<a
v-for="(post, index) in posts"
:key="index"
target="_blank"
#click="alert(post.title)"
>
<figure >
<img
:src="post.source_url"
:alt="post.title"
/>
<figcaption>{{ (post.title) }}</figcaption>
</figure>
</a>
</article>
</template>
<script setup>
const posts = [
{
title:"abc",
content:"defg",
source_url:"https://unsplash.it/200/100",
},
{
title:"uvw",
content:"xyz",
source_url:"https://unsplash.it/150/101",
}
]
</script>
Here's the link to codepen as well..
https://codepen.io/alimbolar/pen/XWBzgVX
The console.log shows this error on codepen..
"[Vue warn]: Unhandled error during execution of native event handler" "
" " at <Pen>"
but on my original code there's no error on localhost.. it's just that the click handler is just not appearing in the dom..
I would appreciate some guidance on what I am doing wrong as I seem to have tried everything and I know maybe it's something very very basic that I am missing.. please advise.
Regards,
Alim
That's just a warning. The real error is given in the console right after:
Uncaught TypeError: _ctx.alert is not a function
The context of inline handlers is not the same as window. You need to call the alert function from a method in your component script.
#click="showAlert(post.title)"
const showAlert = (title) => {
alert(title)
}
updated codepen
I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
More information about the package can also be found at:
http://www.ellison.rocks/sharer.js/
My template event handler looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught TypeError: Cannot read property 'init' of undefined
Any help on how to resolve the issue would be great!
Thanks in advance
You should try the other repo listed on the atmosphere page of this lib: https://github.com/okmttdhr/sharer.npm.js
Also, I don't think you need to append the share button with jquery. Just add the button to your template, and on the click listener, instead of calling window.Sharer, you add the event parameter to the listener function then instantiate a new sharer, like this:
import Sharer from 'sharer.npm.js';
// ...
Template.detail.events({
"click .sharer": function(event) {
const sharer = new Sharer(event.target);
sharer.share();
}
});
I need to apply bindings to a form and add implement submit binding to a single form.
This is code I have, but the previous bindings are not applied.
<form data-bind= "attr: { 'id': 'form-' + ($index() + 1) }, submit: $root.updateStore">
..
</form>
Is the syntax gone wrong? Iam stuck with this guys. Any help would be appreciated. Thanks in advance.
Answering your main question straight up: your syntax hasn't gone wrong, it's just fine.
I'm not sure what you mean by "the previous bindings are not applied", and the code you posted isn't enough to reproduce the issue. It may help to include more code in your question, help us reproduce the issue.
If you want to see your own code in action, have a look at this fiddle. There I've assumed the following full View:
<!-- ko foreach: myForms -->
<form data-bind= "attr: { 'id': 'form-' + ($index() + 1) }, submit: $root.updateStore">
Form with id
'<span data-bind="text: 'form-' + ($index() + 1)"></span>'
<input type='submit' />
</form>
<!-- /ko -->
With the following ViewModels:
function form() { }
function vm() {
var self = this;
self.myForms = ko.observableArray([new form(), new form()]);
self.updateStore = function(formElement) { alert('submitting ' + formElement.id); };
}
You can see the View has a span showing that id in a span as well. If you inspect the forms in the fiddle in a developer toolbar you can see that the IDs are bound just fine.
I can't get data in Template.my.rendered ，but it is ok in Chrome's console.
This is my code:
html:
<Template name="moitorContent">
<div class="tab-pane active" id="1">
........
</div>
</Template>
js:
Template.moitorContent.rendered = function(){
if(!this._rendered) {
this._rendered = true;
console.log(Svse.find({}).fetch());
}
}
When open the chrome with localhost:3000,
the console information is "[]"
but input them in chrome's console
console.log(Svse.find({}).fetch());
console.log can get data
like this:
Any idea about what I am doing wrong?
Any suggestions appreciated!
This is happening because you're using console.log before the subscriptions are complete:
You should find that using this should work if this is the case:
Template.moitorContent.rendered = function(){
console.log(Svse.find({}).fetch());
}
To get passed this you can check whether there is data in there first/or use a Session variable to check whether your subscription is complete.
Template.moitorContent.rendered = function(){
if(!this._rendered && Svse.find({}).count()) {
this._rendered = true;
console.log(Svse.find({}).fetch());
}
}
A cleaner way would be to remove the autopublish package & make a manual subscription & subscribe. Use a Session to mark subscriptions as complete & check whether the subscription is complete in your rendered & use that to do your next task with all the data available.
Having a problem, and so far couldn't get any solutions for seemingly similar SO questions to work. Problem is this:
Using Trigger.io's forge.ajax, my Angular.js view is not updated after the data is returned. I realize this is because forge.ajax is an asychronous function, and the data is returned after the view has already been displayed. I have tried to update the view by using $rootScope.apply(), but it doesn't work for me as shown in the many examples I have seen.
See the Controller code below:
function OfferListCtrl($scope) {
$scope.offers = [];
$scope.fetchOffers = function(callback) {
$scope.offers = [];
var successCallback = function(odataResults) {
var rawJsonData = JSON.parse(odataResults);
var offers = rawJsonData.d;
callback(offers);
};
var errorCallback = function (error){
alert("Failure:" + error.message);
};
forge.request.ajax({
type: 'GET',
url: 'https://www.example.com/ApplicationData.svc/Offers',
accepts: 'application/json;odata=verbose',
username: 'username',
password: 'password',
success: successCallback,
error: errorCallback
});
};
$scope.fetchOffers(function(offers) {
$scope.offers = offers;
forge.logging.info($scope.offers);
});
}
All the code there works fine, and $scope.offers gets populated with the Offer data from the database. The logging function shows the data is correct, and in the correct format.
I have tried using $rootScope.apply() in the logical places (and some illogical ones), but cannot get the view to update. If you have any ideas how I can get this to work, I would greatly appreciate it.
Edit: Added HTML
The HTML is below. Note the button with ng-click="refresh()". This is a just a workaround so I can at least see the data. It calls a one-line refresh function that executes $rootScope.apply(), which does update the view.
<div ng-controller="OfferListCtrl">
<h1>Offers</h1>
<ul>
<li ng-repeat="offer in offers">
<p>Description: {{offer.Description}}<br />
Id: {{offer.Id}}<br />
Created On: {{offer.CreatedOn}}<br />
Published: {{offer.Published}}<br />
</p>
</li>
</ul>
<input type="button" ng-click="refresh()" value="Refresh to show data" />
</div>
You need to change
$scope.fetchOffers(function(offers) {
$scope.$apply(function(){
$scope.offers = offers;
});
forge.logging.info($scope.offers);
});
It is because all changes to the $scope has to be made within the angular scope, in this case since you are calling ajax request using forge the callback is not executing within the angular framework, that is why it is not working.
You can use $scope.$apply() in this case to execute the code within angular framework.
Look at the $apply() methods doc
$apply() is used to execute an expression in angular from outside of
the angular framework. (For example from browser DOM events,
setTimeout, XHR or third party libraries). Because we are calling into
the angular framework we need to perform proper scope life-cycle of
exception handling, executing watches.
do this
function MyController($scope, myService)
{
myService.fetchOffers(data){
//assign your data here something like below or whateever
$offers = data
$scope.$apply();
}
});
Thanks
Dhiraj
When I do that I have an error like : "$digest already in progress"...
I'm Working with $q...
Someone knwo how I can resolve this issue ?
yes, this is caused where ur data comes fast enough and angular has not finished his rendering so the update cant update "outside" angular yet.
so use events:
http://bresleveloper.blogspot.co.il/2013/08/angularjs-and-ajax-angular-is-not.html