我们正在使用kendoui移动框架和icenium创建移动混合应用程序。我知道它是一个单页应用程序,里面有很多视图。但是如果我们添加很多视图,index.html可能会变得非常大且难以维护。我想知道是否有办法将视图组织到单个文件中,并以某种方式将它们包含在主页面中。类似于asp.net中的部分视图。我找不到这样做的方法,也许有一些js库可以做到吗?
答案 0 :(得分:2)
您不需要外部库来实现此目的。 Kendo使用名为远程视图的功能开箱即用。您可以在index.html中使用主视图,在other.html文件中使用其他视图。请参阅此处的文档:http://docs.kendoui.com/getting-started/mobile/application#remote-views
只需添加定义远程视图的文件名(包括路径),不用#。
答案 1 :(得分:1)
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()));
}
});
});
答案 2 :(得分:1)
你可以使用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,你可以采取这个想法