Last active
December 20, 2015 04:39
-
-
Save bartlewis/6072603 to your computer and use it in GitHub Desktop.
"Making a Well Structured Kendo UI Mobile App in Icenium with Require.js" http://codingwithspike.wordpress.com/2012/11/30/making-a-well-structured-kendo-ui-mobile-app-in-icenium-with-require-js/ This blog post above was my starting point, though I am not using Icenium (just KendoUI and PhoneGap Build). The one thing I did not like about this set…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define(function(require) { | |
| var kendoApp, | |
| $ = require('jquery'), | |
| kendo = require('kendo'), | |
| kendoLayouts = { | |
| service: require('layouts/service') | |
| }, | |
| kendoViews = { | |
| drawer: require('views/drawer'), | |
| availability: require('views/availability'), | |
| utilization: require('views/utilization') | |
| }; | |
| // Loop through all kendo layouts and views and spit their HTML into the BODY | |
| function onBeforeInit() { | |
| var i, item, objects = [kendoLayouts, kendoViews], htmlBuffer = []; | |
| for (i=0; i<objects.length; i++){ | |
| for (item in objects[i]) { | |
| if (objects[i].hasOwnProperty(item) && objects[i][item].hasOwnProperty('html')) { | |
| htmlBuffer.push(objects[i][item].html); | |
| } | |
| } | |
| } | |
| $(document.body).prepend(htmlBuffer.join('')); | |
| } | |
| return { | |
| init: function() { | |
| onBeforeInit(); | |
| kendoApp = new kendo.mobile.Application(document.body, { | |
| initial: 'availability-view', | |
| transition: 'slide' | |
| }); | |
| // Body initially hidden to prevent flash of unstyled content | |
| $(document.body).show(); | |
| }, | |
| layouts: kendoLayouts, | |
| views: kendoViews | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta name="format-detection" content="telephone=no" /> | |
| <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width" /> | |
| <title>App</title> | |
| <link rel="stylesheet" href="css/master.css"> | |
| <script data-main="app/main" src="vendor/require/require.js"></script> | |
| </head> | |
| <body id="app"> | |
| <!-- No cluttered mess of HTML elements from several view! --> | |
| <script src="phonegap.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require.config({ | |
| urlArgs: 'bust=v1' + (new Date().getTime()), | |
| paths: { | |
| kendo: '../vendor/kendo/js/kendo.all.min', | |
| css: '../vendor/require/css', | |
| 'css-builder': '../vendor/require/css-builder', | |
| normalize: '../vendor/require/normalize', | |
| text: '../vendor/require/text', | |
| jquery: '../vendor/kendo/js/jquery.min' | |
| }, | |
| shim: { | |
| kendo: { | |
| deps: ['jquery'], | |
| exports: 'kendo' | |
| } | |
| } | |
| }); | |
| // Expose the app module to the global scope so Kendo can access it | |
| var app; | |
| require(['jquery', 'app'], | |
| function($, application) { | |
| app = application; | |
| $(document).ready(function(){ | |
| function onDeviceReady(){ | |
| app.init(); | |
| } | |
| if (!window.device || window.tinyHippos){ | |
| onDeviceReady(); | |
| } else { | |
| document.addEventListener('deviceready', onDeviceReady); | |
| } | |
| }); | |
| } | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="utilization-view" data-role="view" data-layout="service" data-title="Utilization" | |
| data-init="app.views.utilization.init" | |
| data-model="app.views.utilization.viewModel"> | |
| <h2>Utilization</h2> | |
| <p>Extended details for "Utilization" go here</p> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define([ | |
| 'jquery', 'kendo', 'text!./utilization.html' | |
| ], function($, kendo, utilizationHtml) { | |
| var viewModel = kendo.observable({ | |
| }); | |
| return { | |
| html: utilizationHtml, // expose the markup for this view as an html string | |
| init: function(event) { | |
| }, | |
| viewModel: viewModel | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi there,
I am trying to populate the viewModel in view's init event. The viewModel gets the data but it doesn't reflects on view. I had to rebind the view with viewModel to show the updated value.
My view file looks as below:
define([ 'jquery', 'kendo'], function ($, kendo) {
var viewModel = kendo.observable({
Name:"",
PopulateName: function() {
this.set("Name", "value from remote datasource");
}
});
return {
init: function (event) {
viewModel.PopulateName();
// I had to rebind the view with viewModel to show the updated value of Name in view
},
viewModel: viewModel
};
});
Please advice, should I rebind the view or is there any better alternate solution.