luci-base: ui.js: add instantiateView() helper

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

2 files changed, 37 insertions, 4 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 8d921f77c2..61ae69f1cb 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -4268,6 +4268,38 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
 		}, this.varargs(arguments, 2, ctx));
 	},
 
+	/**
+	 * Load specified view class path and set it up.
+	 *
+	 * Transforms the given view path into a class name, requires it
+	 * using [LuCI.require()]{@link LuCI#require} and asserts that the
+	 * resulting class instance is a descendant of
+	 * [LuCI.view]{@link LuCI.view}.
+	 *
+	 * By instantiating the view class, its corresponding contents are
+	 * rendered and included into the view area. Any runtime errors are
+	 * catched and rendered using [LuCI.error()]{@link LuCI#error}.
+	 *
+	 * @param {string} path
+	 * The view path to render.
+	 *
+	 * @returns {Promise<LuCI.view>}
+	 * Returns a promise resolving to the loaded view instance.
+	 */
+	instantiateView: function(path) {
+		var className = 'view.%s'.format(path.replace(/\//g, '.'));
+
+		return L.require(className).then(function(view) {
+			if (!(view instanceof View))
+				throw new TypeError('Loaded class %s is not a descendant of View'.format(className));
+
+			return view;
+		}).catch(function(err) {
+			dom.content(document.querySelector('#view'), null);
+			L.error(err);
+		});
+	},
+
 	AbstractElement: UIElement,
 
 	/* Widgets */
diff --git a/modules/luci-base/luasrc/view/view.htm b/modules/luci-base/luasrc/view/view.htm
index 9220ecf299..b451e8cfbf 100644
--- a/modules/luci-base/luasrc/view/view.htm
+++ b/modules/luci-base/luasrc/view/view.htm
@@ -2,10 +2,11 @@
 
 <div id="view">
 	<div class="spinning"><%:Loading view…%></div>
-	<script type="text/javascript">L.require('view.<%=view%>').catch(function(err) {
-		L.dom.content(document.querySelector('#view'), null);
-		L.error(err);
-	});</script>
+	<script type="text/javascript">
+		L.require('ui').then(function(ui) {
+			ui.instantiateView('<%=view%>');
+		});
+	</script>
 </div>
 
 <%+footer%>