如何在多个文件中组织视图

Question

We are creating a mobile hybrid app using kendoui mobile framework and icenium. I know it is a one page-app with lots of views in it. However if we add a lot of views index.html can get very big and hard to maintain. I wonder if there is a way to organize views into individual files and the include them into main page somehow. Something similar to partial views in asp.net. I cannot find a way of doing it, maybe there is some js library that does it?

Answer 1

You don't need an external library to achieve this. Kendo supports this out of the box using a feature called remote views . You can have main view in index.html and other views in other.html files. See documentation here: http://docs.kendoui.com/getting-started/mobile/application#remote-views

Just add the file name (including path) in which your remote view is defined without # .

Answer 2

RequireJS has a text plugin for this purpose. With it, you can load html, templates, or other text files in the same way you would your Javascript dependencies. A contrived example:

define([
  "lib/underscore",
  "lib/backbone",  
  "text!views/template.html"
], 

function (_, Backbone, template) {
  return Backbone.View.extend({

    template: _.template(template),

    initialize: function() {
      this.listenTo(this.model, "change", this.render);
    },

    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
    }
  }); 
});

Answer 3

you can use RequireJS, i haven't use it but i know you can use, i have this code

// The view Loader. Used to asynchronously load views located in separate .html files
    window.templateLoader = {

    load: function(views, callback) {

        var deferreds = [];

        $.each(views, function(index, view) {
            if (uknowLocate.Views[view]) {
                deferreds.push($.get('js/templates/' + view + '.php', function(data) {
                    uknowLocate.Views[view].prototype.template = _.template(data);
                }, 'html'));
            } else {
                console.error(view + " not found");
            }
        });

        $.when.apply(null, deferreds).done(callback);
    }

};

and i use it in this way:

uknowLocate.init = function () {
    templateLoader.load(['HomeView', 'MainMenuView',
        'GeofencesNewView',
        'CheckinOnetimeView','CheckinScheduledView','CheckinNewView','CheckinRecurrentView',
        'LocationhistoryView'], function () {
        app = new uknowLocate.Routers.ApplicationRouter();
        Backbone.history.start({pushState:false, root:'/project/folder/'});
    });
};

And in this way i load my templates, this is for Backbone, you can take the idea