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

问题描述：

我们正在使用kendoui移动框架和icenium创建移动混合应用程序。我知道这是一个包含大量视图的单页应用程序。但是，如果我们添加大量视图index.html会变得非常大而难以维护。我想知道是否有办法将视图组织到单个文件中，并以某种方式将它们包含到主页面中。类似于asp.net中的部分视图。我找不到这样做的方法，也许有一些js库可以做到这一点？如何在多个文件中组织视图

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

答

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

并以这种方式我装载我的模板，这是骨干，你可以把这个想法

答

你并不需要一个外部天秤座ry来实现这一点。 Kendo使用称为远程视图的功能支持此开箱即用功能。您可以在index.html中使用主视图，在other.html文件中使用其他视图。请参阅文档：http://docs.kendoui.com/getting-started/mobile/application#remote-views

只需添加远程视图定义的文件名（包括路径）而不是＃。

但是，这仅用于导航，我如何实现它在母版页上的页面部分，就像需要一直加载的页脚和页眉？ – 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

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

相关推荐