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

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

來源

2013-02-23 fenix2222

like requirejs？ – 2013-02-23 01:55:51

@gumballhead是的，我實際上使用require.js來組織我的JavaScript文件，但不知道如何做相同的HTML文件，所以我的index.html將像一個母版頁，它會引用不同的意見，從單獨的HTML或JS文件... – fenix2222 2013-02-23 01:59:19

啊，那麼你可以使用HTML/CSS的文本插件。 https://github.com/requirejs/text – 2013-02-23 02:01:25

RequireJS有一個text plugin爲此目的。有了它，您可以像加載Javascript依賴一樣加載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())); 
    } 
    }); 
});

來源

2013-02-23 02:26:28

可以使用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/'}); 
    }); 
};

並以這種方式我裝載我的模板，這是骨幹，你可以把這個想法

來源

2013-02-23 02:38:37

你並不需要一個外部天秤座ry來實現這一點。 Kendo使用稱爲遠程視圖的功能支持此開箱即用功能。您可以在index.html中使用主視圖，在other.html文件中使用其他視圖。請參閱文檔：http://docs.kendoui.com/getting-started/mobile/application#remote-views

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

來源

2013-02-23 22:59:31 Whizkid747

但是，這僅用於導航，我如何實現它在母版頁上的頁面部分，就像需要一直加載的頁腳和頁眉？ – fenix2222 2013-02-24 22:51:50

您在index.html中定義的頁眉和頁腳作爲佈局。您只需將此佈局分配給其他.html文件中的視圖。即使視圖位於其他html文件中，您的初始頁面中定義的視圖與它們之間也沒有區別。嘗試使用此演示中定義的佈局（底部定義的「mobile-view」）。現在在page.html中創建一個視圖，將其佈局分配爲「mobile-view」並嘗試將其視爲遠程視圖。您可以看到該佈局將應用於page.html中的視圖。如果您不清楚，請告訴我，我可以創建一個POC並將其發送給您。 – Whizkid747 2013-02-25 01:51:26

你能提供一個例子嗎？ – fenix2222 2013-02-26 03:02:27

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

回答

相關問題