Rico Suter edited this page May 29, 2015 · 8 revisions

A package bundles multiple views and other code into a redistributable and closed unit. Each package may 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. When views or resources are declared in HTML (e.g. with custom tags or the vs-translate attribute), then they looked up in the same package as the enclosing/parent view.

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 imported module as parameter, the page is looked up in the current package. If no package name or identifier is provided, the view is looked up in the default package.

      import visto = module("libs/visto");
      import package = module("module");
      export class MyPageModel extends visto.VistoViewBase {
      	sampleMethod() {
      		visto.navigateTo(package, "Page2");
  • When 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).