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

problem with kendo ui class implementation

2 Answers 29 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Morgan
Top achievements
Rank 1
Morgan asked on 02 Dec 2013, 07:52 PM
Hello !

i'm currently running some test on kendo ui Class to get a clean code in one of my project but i'm getting some errors i don't know how to solve.

here is my simple sample of code : 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link href="styles/kendo.common.min.css" rel="stylesheet" />
  <link href="styles/kendo.default.min.css" rel="stylesheet" />
  <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
  <link href="styles/index.css" rel="stylesheet" />
</head>
<body onload="onBodyLoad()" style="height:100%; padding-bottom: 100%">
  <div data-role="view" id="test">
      <a href="#test" class="button" data-role="button" data-click="test.myAlert" data-att="attributeTest" data-icon="search">buttonTest</a>
  </div>
  <script src="lib/jquery.min.js"></script>
  <script src="lib/kendo.all.min.js"></script>
  <script src="init/cordovaInit.js"></script>
 
<script type="text/javascript">
  var Test = kendo.Class.extend({
 
    init: function() {
    }
 
    myAlert: function(e) {
      alert("test");
    }
});
</script>
 
    <script>
    var app = new kendo.mobile.Application($(document.body), { skin: "flat" });
    var test = new Test();
    test.myAlert();
    </script>
  </body>
  </html>
and here are the error i'm getting when i run it on chrome 

Uncaught SyntaxError: Unexpected identifier index.html:24
Uncaught ReferenceError: Test is not defined index.html:32
Uncaught TypeError: Cannot read property 'myAlert' of undefined
i really don't know how to get through that ..

my wish is to implement a class that does simple class's job like methods, attributes and so on. i want to combine that with data-clic properties and the data-attribute feature that kendo ui implements.

thank you for helping  and sorry if i'm posting in the wrong place but i haven't seen any section about kendo ui class .. :)

2 Answers, 1 is accepted

Sort by
0
Marcel
Top achievements
Rank 1
answered on 02 Dec 2013, 09:31 PM
You can do it as easy as this:
Make sure you reference the right scripts and stylesheets and it should work
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/kendo.common.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.0.3.js"></script>
    <script src="~/Scripts/kendo.web.js"></script>
     
    <script>
        var Test = kendo.Class.extend({
            myAlert: function (e) {
                alert("test");
            }
        })
 
        $(document).ready(function () {
            var test = new Test();
            test.myAlert();
 
            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>


0
Morgan
Top achievements
Rank 1
answered on 02 Dec 2013, 10:25 PM
Hi, thank you for helping.

i can see that you referenced the kendo.web.js script ..
i'm personnaly using kendo mobile, does your example still work with it ? 
do i have to reference the kendo ui web javascript file and also the kendo ui mobile javascript file ? 

couple weeks ago someone here told me that i had to use de data-click to fire my event since i'm using kendo ui mobile and this was way much better with touch and i also had to use data-attributes to pass data to my functions. is it working with the way you implement the class ? 
thanks again mate ;)
Tags
General Discussions
Asked by
Morgan
Top achievements
Rank 1
Answers by
Marcel
Top achievements
Rank 1
Morgan
Top achievements
Rank 1
Share this question
or