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

    Posted 18 Aug 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. 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