Merge pull request #1136 from NativeScript/cankov/template-factory-function

Add Template factory function and use it in the ui/builder, Repeater and ListView components

ui/builder/builder.d.ts

@@ -4,7 +4,7 @@
 
     export function load(fileName: string, exports?: any): view.View;
     export function load(options: LoadOptions): view.View;
-    export function parse(value: string, exports?: any): view.View;
+    export function parse(value: string | view.Template, exports?: any): view.View;
 
     export interface LoadOptions {
         path: string;

ui/builder/builder.ts

@@ -21,20 +21,24 @@ function isCurentPlatform(value: string): boolean {
     return value && value.toLowerCase() === platform.device.os.toLowerCase();
 }
 
-export function parse(value: string, context: any): view.View {
-    var viewToReturn: view.View;
-
-    if (context instanceof view.View) {
-        context = getExports(context);
+export function parse(value: string | view.Template, context: any): view.View {
+    if (types.isString(value)) {
+        var viewToReturn: view.View;
+    
+        if (context instanceof view.View) {
+            context = getExports(context);
+        }
+    
+        var componentModule = parseInternal(<string>value, context);
+    
+        if (componentModule) {
+            viewToReturn = componentModule.component;
+        }
+    
+        return viewToReturn;
+    } else if (types.isFunction(value)) {
+        return (<view.Template>value)();
     }
-
-    var componentModule = parseInternal(value, context);
-
-    if (componentModule) {
-        viewToReturn = componentModule.component;
-    }
-
-    return viewToReturn;
 }
 
 function parseInternal(value: string, context: any): componentBuilder.ComponentModule {
@@ -104,6 +108,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
 
                 if (templateBuilderDef.isKnownTemplate(name, parent.exports)) {
                     templateBuilder = new templateBuilderDef.TemplateBuilder({
+                        context: parent ? getExports(parent.component) : null, // Passing 'context' won't work if you set "codeFile" on the page
                         parent: parent,
                         name: name,
                         elementName: args.elementName,

ui/builder/template-builder.d.ts

@@ -1,6 +1,7 @@
 //@private
 declare module "ui/builder/template-builder" {
     import xml = require("xml");
+    import page = require("ui/page");
     import componentBuilder = require("ui/builder/component-builder");
 
     class TemplateBuilder {
@@ -18,6 +19,7 @@ declare module "ui/builder/template-builder" {
     export function isKnownTemplate(name: string, exports: any): boolean;
 
     interface TemplateProperty {
+        context?: any;
         parent: componentBuilder.ComponentModule;
         name: string;
         elementName: string;

ui/builder/template-builder.ts

@@ -1,14 +1,19 @@
 import definition = require("ui/builder/template-builder");
+import builder = require("ui/builder");
+import view = require("ui/core/view");
+import page = require("ui/page");
 import xml = require("xml");
 
 var KNOWNTEMPLATES = "knownTemplates";
 
 export class TemplateBuilder {
+    private _context: any;
     private _items: Array<string>;
     private _templateProperty: definition.TemplateProperty;
     private _nestingLevel: number;
 
     constructor(templateProperty: definition.TemplateProperty) {
+        this._context = templateProperty.context;
         this._items = new Array<string>();
         this._templateProperty = templateProperty;
         this._nestingLevel = 0;
@@ -56,7 +61,10 @@ export class TemplateBuilder {
 
     private build() {
         if (this._templateProperty.name in this._templateProperty.parent.component) {
-            this._templateProperty.parent.component[this._templateProperty.name] = this._items.join("");
+            var xml = this._items.join("");
+            var context = this._context;
+            var template: view.Template = () => builder.parse(xml, context);
+            this._templateProperty.parent.component[this._templateProperty.name] = template;
         }
     }
 }

ui/core/view.d.ts

@@ -511,6 +511,18 @@ declare module "ui/core/view" {
      */
     export class CustomLayoutView extends View {
     }
+    
+    /**
+     * Defines an interface for a View factory function.
+     * Commonly used to specify the visualization of data objects.
+     */
+    interface Template {
+        /**
+         * Call signature of the factory function.
+         * Returns a new View instance.
+         */
+        (): View;
+    }
 
     /**
      * Defines an interface for adding arrays declared in xml.

ui/list-view/list-view-common.ts

@@ -8,6 +8,7 @@ import builder = require("ui/builder");
 import label = require("ui/label");
 import color = require("color");
 import weakEvents = require("ui/core/weak-event-listener");
+import types = require("utils/types");
 
 var ITEMS = "items";
 var ITEMTEMPLATE = "itemTemplate";
@@ -91,10 +92,10 @@ export class ListView extends view.View implements definition.ListView {
         this._setValue(ListView.itemsProperty, value);
     }
 
-    get itemTemplate(): string {
+    get itemTemplate(): string | view.Template {
         return this._getValue(ListView.itemTemplateProperty);
     }
-    set itemTemplate(value: string) {
+    set itemTemplate(value: string | view.Template) {
         this._setValue(ListView.itemTemplateProperty, value);
     }
 

ui/list-view/list-view.d.ts

@@ -78,7 +78,7 @@ declare module "ui/list-view" {
         /**
          * Gets or set the item template of the ListView. 
          */
-        itemTemplate: string;
+        itemTemplate: string | view.Template;
 
         /**
          * Gets or set the items separator line color of the ListView. 

ui/repeater/repeater.d.ts

@@ -32,9 +32,9 @@ declare module "ui/repeater" {
         items: any;
 
         /**
-         * Gets or set the item template of the Repeater. 
+         * Gets or set the item template of the Repeater.
          */
-        itemTemplate: string;
+        itemTemplate: string | view.Template;
         
         /**
          * Gets or set the items layout of the Repeater. Default value is StackLayout with orientation="vertical".

ui/repeater/repeater.ts

@@ -90,10 +90,10 @@ export class Repeater extends viewModule.CustomLayoutView implements definition.
         this._setValue(Repeater.itemsProperty, value);
     }
 
-    get itemTemplate(): string {
+    get itemTemplate(): string | viewModule.Template {
         return this._getValue(Repeater.itemTemplateProperty);
     }
-    set itemTemplate(value: string) {
+    set itemTemplate(value: string | viewModule.Template) {
         this._setValue(Repeater.itemTemplateProperty, value);
     }