or
<!DOCTYPE html><html><head> <title>Selection</title> <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet"> <link href="../../../styles/kendo.common.min.css" rel="stylesheet"> <link href="../../../styles/kendo.metro.min.css" rel="stylesheet"> <script src="../../../js/jquery.min.js"></script> <script src="../../../js/kendo.web.min.js"></script> <script src="../../content/shared/js/console.js"></script> <script> </script></head><body> <a class="offline-button" href="../index.html">Back</a> <div id="example" class="k-content"> <div class="demo-section"> <h2>Products</h2> <div id="listView"></div> <div id="pager" class="k-pager-wrap"> </div> </div> <div class="demo-section"> <h2>Console Log</h2> <div class="console"></div> </div> <script type="text/x-kendo-tmpl" id="template"> <div class="product"> <img src="../../content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" /> <h3>#:ProductName#</h3> </div> </script> <script> $(document).ready(function() { var dataSource = new kendo.data.DataSource({ transport: { read: { dataType: "jsonp" } }, pageSize: 9 }); $("#pager").kendoPager({ dataSource: dataSource }); $("#listView").kendoListView({ dataSource: dataSource, selectable: "multiple", dataBound: onDataBound, change: onChange, template: kendo.template($("#template").html()) }); function onDataBound() { kendoConsole.log("ListView data bound"); } function onChange() { var data = dataSource.view(), selected = $.map(this.select(), function(item) { return data[$(item).index()].ProductName; }); kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]"); } }); </script> <style> .demo-section { padding: 15px; width: 692px; } .demo-section h2 { font-size: 1.2em; margin-bottom: 10px; text-transform: uppercase; } .demo-section .console { margin: 0; } .product { background-color: #cccccc; float: left; width: 220px; height: 110px; margin: 0; padding: 5px; cursor: pointer; } .product img { float: left; width: 110px; height: 110px; } .product h3 { margin: 0; padding: 10px 0 0 10px; font-size: .9em; overflow: hidden; font-weight: normal; float: left; max-width: 100px; text-transform: uppercase; } .k-listview:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .k-listview { padding: 0; min-width: 690px; min-height: 360px; } </style></div></body></html><!DOCTYPE html><html> <head> <title>TestApp</title> <meta charset="utf-8"/> <link href="js/libs/kendo/styles/kendo.common.min.css" rel="stylesheet"/> <link href="css/main.css" rel="stylesheet"/> <script data-main="js/main" src="js/libs/require.js"></script> </head> <body> <noscript> <h3>Javascript muss aktiviert werden!</h3> <h3>Javascript must be active!</h3> </noscript> <h3>TestApp</h3> <div id="app"></div> </body></html>require.config({ paths: { jquery : "libs/kendo/js/jquery.min", kendo : "libs/kendo/js/kendo.all.min", text : "libs/text", indexViewModel : "models/m_index", indexViewTemplate : "views/v_index.html" }, // inform requirejs that kendo ui depends on jquery shim: { "kendo": { deps: ["jquery"] } }}); require(['jquery', 'kendo', 'myapp'], function() { var $ = require('jquery'); var kendo = require('kendo'); var myapp = require('myapp'); var App = new myapp(); App.init();});define(function(){ var myApp = function() { var constructor, app = {}, // public class object of app constructor = function() { console.info('App constructor executed'); return app; }; app.init = function() { console.info('App started'); // Here I want to enter the code which should create the view and load the template as text
// The view model should be a requureJS file and the template for the view should be loaded by
// require text plugin }; return constructor.apply(null, arguments); }; return myApp;});