如何在多個文件中組織視圖

Question

我們正在使用kendoui移動框架和icenium創建一個移動混合應用程序。 我知道這是一個單頁面應用程序，其中包含很多視圖。 但是，如果我們添加很多視圖，index.html可能會變得很大且難以維護。 我想知道是否有一種方法可以將視圖組織到單個文件中，並以某種方式將其包含到主頁中。 與asp.net中的局部視圖類似。 我找不到做到這一點的方法，也許有一些js庫可以做到這一點？

Answer 1

您不需要外部庫即可實現此目的。 Kendo使用稱為“ 遠程視圖”的功能開箱即用地支持此功能。 您可以在index.html中擁有主視圖，而在other.html文件中擁有其他視圖。 請參閱此處的文檔： http : //docs.kendoui.c​​om/getting-started/mobile/application#remote-views

只需添加不使用 ＃定義遠程視圖的文件名（包括路徑）。

Answer 2

RequireJS為此有一個文本插件 。 使用它，您可以以與Java依賴項相同的方式加載html，模板或其他文本文件。 一個人為的例子：

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

您可以使用RequireJS，我還沒有使用過，但是我知道您可以使用，我有這段代碼

// 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);
    }

};

我以這種方式使用它：

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/'});
    });
};

這樣，我加載模板，這是針對Backbone的，您可以采用