Skip to content

Instantly share code, notes, and snippets.

@bartlewis

bartlewis/app.js

Last active December 20, 2015 04:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bartlewis/6072603 to your computer and use it in GitHub Desktop.
Save bartlewis/6072603 to your computer and use it in GitHub Desktop.
Download ZIP
"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…
Raw
app.js
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
};
});
Raw
index.html
<!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>
Raw
main.js
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);
}
});
}
);
Raw
utilization.html
<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>
Raw
utilization.js
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
};
});
@davidsheardown
Copy link

Hi there,

Great addition in order to split the views up from the main html, however would it be cheeky to ask if you have a fully running example of the above? getting to grips with Kendo, so it is probably my lack of knowledge.. but just trying to work out if it is that or something else?

@bartlewis
Copy link
Author

https://github.com/drc/insight

@tomaerts
Copy link

Great tutorial, thanks!
I'm just wondering if it would be possible to create the sturcture of the app in the index.html and append each view to the correct div?

@vivek-9dec
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment