This is a migrated thread and some comments may be shown as answers.

Class instance combine with data-click and data-attributes

5 Answers 129 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Morgan asked on 03 Dec 2013, 08:45 PM

Hello :)

I did post the same kind of question in the kendo ui framework general Discussions and i got an answer but i fact my question is more about kendo ui mobile ...

I was wondering if it was possible to use the data-click property to call a method that is inside a class that i instanciate and also using the data-attributes to pass data to this method.

i did try some things but it doesn't work. someone gave an example of this in the kendo ui framework general section but it uses the data-bind property and i do want to use the data-click one :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

<link href="./styles/kendo.common.css" rel="stylesheet" />

<link href="./styles/kendo.default.css" rel="stylesheet" />

<script src="./lib/jquery.min.js"></script>

<script src="./lib/kendo.all.min.js"></script>

<script>

var Test = kendo.Class.extend({

myAlert: function (e) {

alert("test");

}

})

$(document).ready(function () {

var test = new Test();

kendo.bind($("#test"), test);

})

</script>

</head>

<body>

<div data-role="view" id="test">

<a href="#test" class="button" data-role="button" data-bind="events: { click: myAlert }" data-icon="search">buttonTest</a>

</div>

</body>

</html>

i simply tried to remove the bind cause it wasn't what i wanted and replace the data-bind by a data-click but it of course doesn't work.

so would it be possible to provide an example that uses the things i said before please ?

thank you so much for helping.

5 Answers, 1 is accepted

Accepted

answered on 04 Dec 2013, 04:54 PM

Hello Morgan,

The class is JavaScript object. In order to bind event handler function that is part of an object you should use the dot notation syntax. Here is an example:

<div data-role="view" id="test">

<a href="#test" class="button"

data-role="button"

data-click="test.myAlert"

data-icon="search">buttonTest</a>

</div>

<script>

var Test = kendo.Class.extend({

myAlert: function (e) {

alert("test");

}

});

var test = new Test();

var app = new kendo.mobile.Application();

</script>

It is important the test object to be available in the global scope.

Regards,
Alexander Valchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 05 Dec 2013, 01:34 PM

There is still something i don't get ..

when i adapt your example for my use, it works like this :

var Test = kendo.Class.extend({

monTest: function (e) {

var dataSourceSearch;

var dataSourceDetails;

var pos;

var data = e.button.data();

if (data.relayControlerCommand === "rechercheRelais"){

var myFilterObject = buildFilterObject("FALSE", "FALSE", "FALSE", "FALSE", "FALSE");

if (data.searchWay === "usingData"){

pos = getLatLongFromAdress(myFilterObject);

}

else if (data.searchWay === "usingPos"){

pos = getLatLongFromCordova(myFilterObject);

}

$("#scrollerRelais").show();

$("#map-canvas").hide();

}

});

But the simple fact of adding another method in the class like this, has my app crashing ...

var Test = kendo.Class.extend({

monTest: function (e) {

var dataSourceSearch;

var dataSourceDetails;

var pos;

var data = e.button.data();

if (data.relayControlerCommand === "rechercheRelais"){

var myFilterObject = buildFilterObject("FALSE", "FALSE", "FALSE", "FALSE", "FALSE");

if (data.searchWay === "usingData"){

pos = getLatLongFromAdress(myFilterObject);

}

else if (data.searchWay === "usingPos"){

pos = getLatLongFromCordova(myFilterObject);

}

$("#scrollerRelais").show();

$("#map-canvas").hide();

}

test: function (e) {

alert("test");

}

});

Is there something special to do to have the possibility of setting several methods in the class ?
maybe a syntax thing i didn't get ..

thank you .

Accepted