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

SPA and requireJS

2 Answers 127 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
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>
    <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>
            <h3>Javascript muss aktiviert werden!</h3>
            <h3>Javascript must be active!</h3>
        <div id="app"></div>           

This is my main.js:

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

This is my myapp.js:

    var myApp = function() {
    var constructor,
        app = {},       // public class object of app
        constructor = function() {'App constructor executed');
        return app;
    app.init = function() {'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

Sort by
Telerik team
answered on 18 Aug 2014, 11:44 AM
Hello Timon,

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
answered on 18 Aug 2014, 12:55 PM
Hi Petyo,

thanks that helped!
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Top achievements
Rank 1
Share this question