SPA and requireJS

3 posts, 1 answers
  1. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2014 Link to this post

    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. Answer
    Petyo avatar
    2437 posts

    Posted 18 Aug 2014 Link to this post

    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!
  3. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 18 Aug 2014 Link to this post

    Hi Petyo,

    thanks that helped!
Back to Top