A package bundles multiple views and other code into a redistributable and closed unit. Each package can have its own "views", "viewModels" and "languages" directories. Each directory in the "scripts" directory is a package (except the "libs" directory). The "app" package is the default package and everything (e.g. views, language strings) which is loaded with no package identifier is loaded from the default package except when declared in HTML (e.g. with the "view" binding or the "data-translate" attribute), in this case it's loaded from the same package as the enclosing view or code.

Package best practices:
  • Navigate or create views using the "module" import for views from the same package. Don't make use of hard-coded package names. This way a package can be renamed and still works. Using the module parameter, the page is looked up in the current package. If no package name is defined, the view is looked up in the default package "app".

define(["exports", "libs/visto", "module"], function (exports, visto, module) {
	function MyPageModel() { };
	MyPageModel.prototype.sampleMethod = function() {
		visto.navigateTo([module, "Page2"]);
	exports.MyPageModel = MyPageModel;

TypeScript code:

import visto = module("libs/visto");
import module = module("module");
export class MyPageModel {
	sampleMethod() {
		visto.navigateTo([module, "Page2"]);
  • If loading translated strings by code, use the view or view model's getString() method or use the same "module" approach as for creating views (check out the internationalization page).

Last edited Nov 5, 2013 at 9:42 AM by rsuter, version 15


No comments yet.