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

SPA and requireJS

2 Answers 222 Views

SPA

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

T. asked on 14 Aug 2014, 01:04 PM

Dear all,

I am brand new to Kendo UI SPA anf wanted to create my 1st 'Hello World' application.
To get organized JS files I also wanted to use requireJS, but I could not really get what I want and I need your help (please).

This is my index.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>

This is my main.js:

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();

});

This is my myapp.js:

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;

});

This is what I have so far, and it shows up 'App started' in the browser's console log.
But what I could not get is:

1. Create a view which is a requireJS model
2. This view should load the template from a file using the requireJS text plugin
3. The view should show up inside the DOM's #app DIV.
4. Later on I want to create several views using requreJS module and switch between them

So this is really basic. But I don't know how to combine SPA and requireJS.

I need your help,

Thanks a lot!

2 Answers, 1 is accepted

Accepted

answered on 18 Aug 2014, 11:44 AM

849807.zip

Hello Timon,

I prepared an example which should match your requirements - please examine it.

Regards,
Petyo
Telerik

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