Update types/jsrender definitions (#35148)

* Update types/jsrender definitions

* Remove unnecessary 'jquery' reference from jsrender/jsrender-tests.ts
This commit is contained in:
Boris Moore
2019-05-07 19:52:55 -07:00
committed by Jesse Trinity
parent 65c223ac80
commit f2cb8276df
4 changed files with 1007 additions and 143 deletions
+399 -41
View File
@@ -1,57 +1,415 @@
// Type definitions for JsRender
// Type definitions for JsRender 1.0
// Project: http://www.jsviews.com/#jsrender
// Definitions by: Kensuke Matsuzaki <https://github.com/zakki>
// Definitions by: Boris Moore <https://github.com/borismoore>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
/// <reference types="jquery"/>
/// <reference types="jquery" />
declare namespace JsRender {
interface Converters {
(name: string, converterFn: (value: any) => any): any;
(namedConverters: any, parentTemplate?: any): any;
declare module 'jsrender' {
export = jsrender;
}
html(valueToEncode: string): string;
attr(valueToEncode: string): string;
url(valueToEncode: string): string;
}
declare const jsrender: ((jquery?: JQueryStatic) => JQueryStatic) & JQueryStatic;
interface Views {
converters: Converters;
// ********************************** JsRender **********************************
tags(name: string, tagFn: (value: any) => any): any;
tags(name: string, tagOptions: any): any;
tags(namedTags: any): any;
interface JQueryStatic {
/* var htmlString = $.render.templateName(data, myHelpersObject); // Render named template */
render: {
[tmplName: string]: JsViews.TemplateRender;
};
helpers(name: string, helper: any): any;
helpers(namedHelpers: any, parentTemplate?: any): any;
}
/* $.views.xxx ... // JsRender/JsViews APIs */
views: JsViews.Views;
interface Template {
render(data?: any): string;
}
interface NamedTemplate {
(data?: any): string;
}
interface Render {
(data?: any, helpersOrContext?: any): string;
}
interface RenderStatic {
[index: string]: NamedTemplate;
}
/* $.templates(...) or $.templates.templateName: Compile/get template */
templates: JsViews.Templates;
}
interface JQuery {
render: JsRender.Render;
/* var htmlString = $("#template").render(data, myHelpersObject); // Render template, and pass in helpers or context */
render: JsViews.TemplateRender;
}
interface JQueryStatic {
render: JsRender.RenderStatic;
views: JsRender.Views;
templates(markupOrSelector: string): JsRender.Template;
templates(name: string, markupOrSelector: string): JsRender.Template;
templates(namedTemplates: any): any;
declare namespace JsViews {
/* Generic hash of objects of type T */
interface Hash<T> {
[option: string]: T;
}
/* $.views*/
interface Views {
/* $.views.templates() */
templates: Templates;
/* $.views.converters() */
converters: Store<Converter, Converter>;
/* $.views.tags() */
tags: Store<Tag, TagSetter>;
/* $.views.helpers() */
helpers: Store<any, any>;
/* $.views.viewModels() */
viewModels: ViewModels;
/* $.views.settings */
settings: Settings;
/* $.views.sub.xxx */
sub: Hash<any>;
/* $.views.map() */
map(any: any): any;
}
/* $.views.settings*/
interface Settings {
/**
* Set delimiters
* $.views.settings.delimiters(...)
*
* @param {string} openChars
* @param {string} [closeChars]
* @param {string} [link]
* @returns {Settings}
*/
delimiters(openChars: string, closeChars?: string, link?: string): Settings;
delimiters(chars: string[]): Settings;
/**
* Get delimiters
* delimsArray = $.views.settings.delimiters()
*
* @returns {string[]}
*/
delimiters(): string[];
/**
* Set debug mode
* $.views.settings.debugMode(true)
*
* @param {boolean} debugMode
* @returns {Settings}
*/
debugMode(debugMode: boolean | ((e?: any, fallback?: string, view?: View) => any)): Settings;
/**
* Get debug mode setting
* debugMode = $.views.settings.debugMode()
*
* @returns {boolean}
*/
debugMode(): boolean;
/**
* Set allowCode mode
* $.views.settings.allowCode(true)
*
* @param {boolean} allowCode
* @returns {Settings}
*/
allowCode(allowCode: boolean): Settings;
/**
* Get allowCode mode setting
* allowCode = $.views.settings.allowCode()
*
* @returns {boolean}
*/
allowCode(): boolean;
/**
* Set advanced settings (useViews, _jsv ...)
* $.views.settings.advanced({useViews: true})
*
* @param {object} settings
* @returns {Settings}
*/
advanced(settings: Hash<any>): Settings;
/**
* Get advanced settings
* advancedSettings = $.views.settings.advanced()
*
* @returns {object}
*/
advanced(): Hash<any>;
}
interface Store<T, TO> {
/**
* Generic store() function to register item, named item, or hash of items
* Also used as hash to store the registered items
* Used as implementation of $.templates(), $.views.templates(), $.views.tags(), $.views.helpers() and $.views.converters()
*
* @param {string|hash} name name - or selector, in case of $.templates(). Or hash of items
* @param {any} [item] (e.g. markup for named template)
* @param {Template} [parentTmpl] For item being registered as private resource of template
* @returns {any|Views} e.g. compiled template - or $.views in case of registering hash of items
*/
(name: string, item?: TO, parentTmpl?: Template): T; // named item
(namedItems: Hash<TO>, parentTmpl?: Template): Views; // Multiple named items
/**
* var template = $.templates.templateName; // Get compiled named template - or similar for named tags, converters, helpers, viewModels
*/
[itemName: string]: T;
}
// Templates
interface Templates extends Store<Template, TemplateSetter> {
/**
* Additional $.templates() signature for compiling unnamed template
*
* @param {string|TemplateOptions} markup or selector
* @param {Template} [parentTmpl] For compling template as private resource of parent template
* @returns {Template} compiled template
*/
(markupOrSelectorOrOptions: string | TemplateOptions, parentTmpl?: Template): Template; // Unnamed template
}
interface TemplateOptions {
/* Template options hash */
tags?: Hash<TagSetter>;
templates?: Hash<TemplateSetter>;
markup: any;
converters?: Hash<Converter>;
helpers?: Hash<any>;
useViews?: boolean;
}
type TemplateSetter = TemplateOptions | string;
interface Template extends TemplateRender {
/* Compiled template object */
tmplName: string;
tags?: Hash<Tag>;
templates?: Hash<Template>;
render: TemplateRender;
fn?: (...args: any[]) => string;
_is: string;
markup: string;
converters?: Hash<Converter>;
helpers?: Hash<any>;
useViews?: boolean;
}
interface TemplateRender {
/**
* Template render method: render the template as a string, using the specified data and helpers/context
* var htmlString = template(data, myHelpersObject);
* var htmlString = template.render(data, myHelpersObject);
*
* $("#tmpl").render(), tmpl.render(), tagCtx.render(), $.render.namedTmpl()
*
* @param {any} data
* @param {hash} [helpersOrContext]
* @param {boolean} [noIteration]
* @returns {string} rendered template
*/
(data?: any, helpersOrContext?: Hash<any>, noIteration?: boolean): string;
(data?: any, noIteration?: boolean): string;
}
// ViewModels
interface ViewModelOptions {
/* ViewModel options hash */
// getters?: string[] | ;
getters?: any[];
extend?: Hash<any>;
id?: string | ((a: any, b: any) => boolean);
}
interface ViewModel {
/* ViewModel options hash */
getters: string[];
extend: Hash<any>;
map(data: any): any;
(...args: any[]): any;
[prop: string]: any;
}
interface ViewModels extends Hash<ViewModel> {
/* $.views.viewModels() */
(viewModel: ViewModelOptions): ViewModel;
(name: string, viewModel: ViewModelOptions, viewModels?: Hash<ViewModel>): ViewModel;
(namedItems: Hash<ViewModelOptions>, viewModels?: Hash<ViewModel>): Hash<ViewModel>;
}
// Converters
interface Converter {
/* Converter function */
(value: any, ...restArgs: any[]): any;
}
// Tags
interface TagOptionProps {
/* Properties that can be set as tag options, and retrieved as Tag properties */
init?: (this: TagInst, tagCtx?: TagCtx, linkCtx?: LinkCtx, ctx?: Context) => void;
render?: (this: TagInst, ...args: any[]) => string|void;
baseTag?: string | Tag;
contentCtx?: boolean | ((this: TagInst, arg0: any) => any);
convert?: string|Converter;
argDefault?: boolean;
bindTo?: number | string | Array<number|string>;
bindFrom?: number | string | Array<number|string>;
flow?: boolean;
ctx?: Hash<any>;
[prop: string]: any;
}
interface TagOptions extends TagOptionProps {
/* Tag options hash */
template?: TemplateSetter;
}
type TagSetter = TagOptions | string | ((...args: any[]) => any);
interface Tag extends TagOptionProps {
/* Tag object */
tagCtx: TagCtx;
tagCtxs: TagCtx[];
tagName: string;
parent?: Tag;
parents?: Hash <Tag>;
rendering?: Hash<any>;
ctxPrm(name: string, value?: any): any; // get/set in JsViews but get only in JsRender
cvtArgs(elseBlock?: number): any[] | void;
bndArgs(elseBlock?: number): any[] | void;
base?: (...args: any[]) => any;
baseApply?: (args: any[]|IArguments) => any;
}
interface TagInst extends Tag {
template?: TemplateSetter;
}
interface Context {
/* ctx object */
/* Root data object or array */
root: any;
/* This tag */
tag?: Tag;
/* Ancestor tags */
parentTags?: Hash<Tag>;
/* tagCtx object */
tagCtx?: any;
[prop: string]: any;
}
interface TagCtxParams {
/* tagCtx.params object */
args: string[];
props: Hash<string>;
ctx: Hash<string>;
}
interface TagCtx {
/* tagCtx object */
/* Arguments passed declaratively */
args: any[];
/* Properties passed declaratively */
props: Hash<any>;
/* Declarative tag params object */
params: TagCtxParams;
/* External tmpl, or else template for wrapped content. Otherwise, false */
tmpl: Template;
/* Template for wrapped content, or else external template. Otherwise, false */
content: Template;
/* Tag instance index (if siblings rendered against array data) */
index: number;
/* JsViews view containing this tag instance */
view: View;
/* View context for tag */
ctx: Context;
/* This tag instance */
tag: Tag;
/* Tag render method */
render: TagRenderMethod;
/* tagCtx.ctxPrm() method */
ctxPrm(name: string, value?: any): any; // get/set in JsViews but get only in JsRender
/* tagCtx.cvtArgs() method */
cvtArgs(): any[]| void;
/* tagCtx.bndArgs() method */
bndArgs(): any[] | void;
}
interface LinkCtx {
/* linkCtx object, null in JsRender */
}
interface TagRenderMethod {
/* tag render method */
(...arguments: any[]): string;
}
interface View {
/* Template rendered by view */
tmpl: Template;
/* Block content template (for block tags) */
content?: Template;
/* Child views */
views: View[] & Hash<View>;
/* Parent view */
parent: View;
/* View context (helpers and parameters from parent views) */
ctx: Context;
/* View type */
type: string;
/* view.get() method: find parent or child views */
get(type?: string): View;
get(inner: boolean, type?: string): View;
/* view.getIndex() method: get index of parent "item" view */
getIndex(): number;
/* view.ctxPrm() method: get/set contextual parameter or helper */
ctxPrm(name: string, value?: any): any; // get/set in JsViews but get only in JsRender
/* Find contextual template resource */
getRsc(namedCollection: string, itemName: string): any;
/* Index of this view in parent views collection */
index: number;
/* tag (for tag views) */
tag: Tag;
/* contextual data */
data: any;
/* root View (top-level) */
root: View;
scope: View;
}
} // end namespace
+607 -39
View File
@@ -1,47 +1,615 @@
$.views.converters("upper", function(val) {
return val.toUpperCase();
});
"use strict";
(function() {
$.views.converters({
upper: (val: string) => val.toUpperCase(),
lower: (val: string) => val.toLowerCase()
});
$.views.converters.html("< > ' \" &");
$.views.converters.attr( "< > ' \" &");
$.views.converters.url("<_>_\"_ ");
function renderBoldP(value: any): string {
return "<p><b>" + value + "</b></p>";
function log(code: string, message?: string, success?: boolean) {
message = message || '';
if (document && document.body) {
if (message) {
message = $.views.converters.html(message);
message = success === undefined ? "<br/>==== <b><em>" + message + "</em></b> ====<br/>" : message;
}
if (!success) {
message += ": <b>Failure</b>";
}
if (code !== undefined) {
code = $.views.converters.html(code);
message = arguments.length>1 ? "<code>" + code + "...</code> " + message : "log: " + "<code>" + code + "</code> ";
}
$(document.body).append(message + "<br/>");
} else {
if (success === undefined) {
message = "==== " + message + " ====";
} else {
if (code) {
message = code + "... " + message;
}
if (!success) {
message += ": Failure";
}
}
console.log(message);
}
}
$.views.tags("boldp", renderBoldP);
$.views.tags("boldp", {
template: "<p><b>{{:~tag.tagCtx.args[0]}}</b></p>"
});
function myFormatFunction(value: string, upper: string): string {
return upper ? value.toUpperCase() : value.toLowerCase();
}
$.views.helpers("format", myFormatFunction);
$.views.helpers({format: myFormatFunction});
var person = {
name: "Adriana"
let assert = {
equal: function(a: string, b: string, code: string, message?: string) {
log(code, message || '', a === b);
},
ok: function(a: boolean, code: string, message?: string) {
log(code, message || '', a);
},
testGroup: function(message: string) {
log('', message);
}
};
$.templates("personTmpl", "<label>Name:</label> {{:name}}");
var html = $.render["personTmpl"](person);
console.log(html);
/*<<<<<<<<<<<<<*/ assert.testGroup("$.templates, and basic render"); /*>>>>>>>>>>>>>*/
var myTmpl = $.templates("<label>Name:</label> {{:name}}");
var html = myTmpl.render(person);
console.log(html);
$(document.body).append('<script id="myTmpl" type="text/x-jsrender">{{:name}} </script>');
$.templates({
personTmpl: "#personTemplate",
labelTmpl: "Name:"
});
let tmpl = $.templates("#myTmpl");
var html = $("#personTemplate").render(person);
console.log(html);
assert.ok(tmpl.markup === "{{:name}} ", 'tmpl = $.templates("#myTmpl")');
assert.ok($.views.templates("#myTmpl").markup === "{{:name}} ", 'tmpl = $.views.templates("#myTmpl")');
assert.ok($.views.templates === $.templates, '$.views.templates === $.templates');
let data = { name: "Jo" };
let html = tmpl(data);
assert.ok(html === "Jo ", 'tmpl(data)', 'Template as render function');
html = tmpl.render(data);
assert.ok(html === "Jo ", 'tmpl.render(data)', 'Render function');
html = $("#myTmpl").render(data);
assert.ok(html === "Jo ", '$("#myTmpl").render(data)', 'Render function on jQuery instance for script block');
$.templates("myTmpl", "#myTmpl");
html = $.render.myTmpl(data);
assert.ok(html === "Jo ", '$.templates("myTmpl", "#myTmpl"); $.render.myTmpl(data)', 'Named template as expando on $.render');
html = $.templates.myTmpl(data);
assert.ok(html === "Jo ", '$.templates("myTmpl", "#myTmpl"); $.templates.myTmpl(data)', 'Named template as expando on $.templates');
let array = [{ name: "Jo" }, { name: "Amy" }, { name: "Bob" }];
html = tmpl(array);
assert.ok(html === "Jo Amy Bob ", 'tmpl(array)', 'Render array');
let helpers = {
title: "Mr"
};
tmpl = $.templates("tmplFromString", "{{:~title}} {{:name}}. ");
assert.ok(tmpl.tmplName + tmpl.markup + tmpl.useViews === "tmplFromString{{:~title}} {{:name}}. true", 'tmpl.tmplName + tmpl.markup + tmpl.useViews', 'tmpl properties');
/*<<<<<<<<<<<<<*/ assert.testGroup("render() access helpers and set noIteration"); /*>>>>>>>>>>>>>*/
html = tmpl(array, helpers);
assert.ok(html === "Mr Jo. Mr Amy. Mr Bob. ", 'tmpl(array, helpers)', 'Access helpers');
$(document.body).append('<script id="myTmpl2" type="text/x-jsrender">{{:length}}{{:~title}} {{:name}}. </script>');
html = $("#myTmpl2").render(array, helpers);
assert.ok(html === "Mr Jo. Mr Amy. Mr Bob. ", '$("#myTmpl").render(array, helpers)', 'Access helpers');
tmpl = $.templates("{{:length}} {{for}}{{:~title}} {{:name}} {{/for}}");
html = tmpl(array, helpers, true);
assert.ok(html === "3 Mr Jo Mr Amy Mr Bob ", 'tmpl(array, helpers, true)', 'Render array, no iteration');
html = tmpl.render(array, helpers, true);
assert.ok(html === "3 Mr Jo Mr Amy Mr Bob ", 'tmpl.render(array, helpers, true)', 'Render array, no iteration');
$.views.helpers("title", "Sir");
html = tmpl(array, true);
assert.ok(html === "3 Sir Jo Sir Amy Sir Bob ", 'tmpl(array, true)', 'Render array, no iteration');
html = tmpl.render(array, true);
assert.ok(html === "3 Sir Jo Sir Amy Sir Bob ", 'tmpl.render(array, true)', 'Render array, no iteration');
html = $("#myTmpl2").render(array, helpers, true);
assert.ok(html === "3Mr . ", '$("#myTmpl").render(array, helpers, true)', 'Render array, no iteration');
$.views.helpers("title", null);
html = tmpl(array, true);
assert.ok(html === "3 Jo Amy Bob ", '$.views.helpers("title", null); ...tmpl(array, true)', 'Unregister named helper, then render array, no iteration');
/*<<<<<<<<<<<<<*/ assert.testGroup("Compile template with private resources"); /*>>>>>>>>>>>>>*/
tmpl = $.templates({
markup: "{{:~title}}{{:~title2}}{{:~title3}} {{upper:name}} {{full/}} {{include tmpl='inner2'/}}{{include tmpl='inner'/}}",
converters: { // private converter
upper: function(val) {
return val.toUpperCase();
}
},
tags: { // private tag
full: "{{upper:~title}} {{:name}}"
},
helpers: { // private helper
title: "Mr"
},
templates: { // private template
inner: "Inner: {{:~title}} {{:name}} {{full/}} {{short/}}"
}
});
$.views.converters({lower: function(val) {return val.toLowerCase();}}, tmpl); // Additional private converter
$.templates("inner2", "Inner2", tmpl); // Additional private template
$.views.helpers({title2: "Sir",
title3: "Ms",
myob: {amount: 33},
myfn: function(a: number) {return a + 10;}
}, tmpl); // Additional private helpers
$.views.tags("short", "{{lower:name}} ", tmpl); // Additional private tag
html = tmpl(array);
assert.ok(html === "MrSirMs JO MR Jo Inner2Inner: Mr Jo MR Jo jo MrSirMs AMY MR Amy Inner2Inner: Mr Amy MR Amy amy MrSirMs BOB MR Bob Inner2Inner: Mr Bob MR Bob bob ",
'tmpl = $.templates({markup: ..., converters: tags ... etc', 'Compile template with resources');
assert.equal(
tmpl.converters.upper("jo") +
tmpl.converters.lower("JO") +
tmpl.tags.short.template.markup +
tmpl.helpers.title +
tmpl.helpers.title2 +
tmpl.helpers.title3 +
tmpl.helpers.myob.amount +
tmpl.helpers.myfn(5) +
tmpl.templates.inner.markup +
tmpl.templates.inner2.markup,
"JOjo{{lower:name}} MrSirMs3315Inner: {{:~title}} {{:name}} {{full/}} {{short/}}Inner2",
'tmpl.converters.upper("jo") ... +tmpl.templates.inner2.markup',
"Accessing tmpl resources");
/*<<<<<<<<<<<<<*/ assert.testGroup("template.useViews"); /*>>>>>>>>>>>>>*/
assert.ok(!$.templates("{{for/}}").useViews, '$.templates("{{for/}}").useViews' , "useViews defaults to false");
assert.ok($.templates({
markup: "{{for/}}",
useViews: true
}).useViews, '$.templates({ ... useViews: true, ...})', "useViews forced to true");
assert.ok($.templates("{{for}}{{:#parent}}{{/for}}").useViews, '$.templates("{{for}}{{:#parent}}{{/for}}").useViews', "useViews defaults to true");
/*<<<<<<<<<<<<<*/ assert.testGroup("$.views.tags()"); /*>>>>>>>>>>>>>*/
let tag = $.views.tags("add", function(val1, val2) { return val1 + "|" + val2; });
let test = tag._is;
tmpl = $.templates("{{add first last foo='FOO'/}} {{privateadd first last /}}");
tag = $.views.tags("privateadd", function(val1, val2) { return val1 + "!!" + val2; }, tmpl);
test += tag._is;
assert.equal(test + tmpl({first: "A", last: "B"}), "tagtagA|B A!!B", '$.views.tags("add", function() { ... })', "create tag from function, public or private");
$.views
.tags({add: "{{: ~tagCtx.args[0] + '&' + ~tagCtx.args[1]}}"}) // Create public tag (replaces previous version)
.tags({privateadd: "{{: ~tagCtx.args[0] + '$$' + ~tagCtx.args[1]}}"}, tmpl); // Create private tag (replaces previous version)
assert.equal(tmpl({first: "A", last: "B"}), "A&B A$$B", '$.views.tags("add", "...")', "create tag from string, public or private");
$.views.tags("add", {
mainElement:".a", // Set mainElem programmatically
init: function(tagCtx, linkCtx, ctx) {
this.baseApply(arguments);
test = this.sortDataMap;
this.foo = tagCtx.props.foo;
test = this.render();
this.template = "some string";
this.template = {markup: "some content"};
},
render: function(val1, val2) {
this.baseApply(arguments);
test = this.sortDataMap;
this.template = "some string";
this.template = {markup: "some content"};
return val1 + "==" + val2 + ":" + this.foo + "?" + this.ctx.x;
},
template: {markup: "none"},
baseTag: "for",
contentCtx: true, // function() { return "aaa"; },
convert: function(val) { return val.toLowerCase(); },
argDefault: true,
bindTo: [0, "foo"],
bindFrom: [0, "foo"],
flow: false,
ctx: { x: 'myctx' }
});
$.views.tags({privateadd: {
template: {markup: "none"},
}}, tmpl);
assert.equal(tmpl({first: "A", last: "B"}), "a==B:FOO?myctx none", '$.views.tags("add", {...})', "create tag from tagOptions hash, public or private");
/*<<<<<<<<<<<<<*/ assert.testGroup("$.views.converters()"); /*>>>>>>>>>>>>>*/
let converter = $.views.converters("add", function(val1, val2) { return val1 + "|" + val2 + ", "; });
test = converter("a", "b");
tmpl = $.templates("{{add: first last}} {{privateadd: first last}}");
converter = $.views.converters({privateadd: function(val1, val2) { return val1 + "!!" + val2 + ", "; }}, tmpl)
.converters.privateadd; // returns views, then access private converter resource 'privateadd'
test += converter("c", "d");
assert.equal(test + "--" + tmpl({first: "A", last: "B"}), "a|b, c!!d, --A|B, A!!B, ",
'$.views.converters("add", function() { ... })', "register converter, public or private");
converter = $.views.converters("add", null);
assert.ok(converter === null && $.views.converters.add === undefined, '$.views.converters("...", null)', "unregister converter");
/*<<<<<<<<<<<<<*/ assert.testGroup("$.views.helpers()"); /*>>>>>>>>>>>>>*/
let helper = $.views.helpers("add", function(val1: string, val2: string) { return val1 + "|" + val2 + ", "; });
test = helper("a", "b");
tmpl = $.templates("{{:~add(first, last)}} {{:~privateadd(first, last)}}");
helper = $.views.helpers({privateadd: function(val1: string, val2: string) { return val1 + "!!" + val2 + ", "; }}, tmpl)
.helpers.privateadd; // returns views, then access private helper resource 'privateadd'
test += helper("c", "d");
assert.equal(test + "--" + tmpl({first: "A", last: "B"}), "a|b, c!!d, --A|B, A!!B, ",
'$.views.helpers("add", function() { ... })', "register helper, public or private");
helper = $.views.helpers("add", null);
assert.ok(helper === null && $.views.helpers.add === undefined, '$.views.helpers("...", null)', "unregister helper");
/*<<<<<<<<<<<<<*/ assert.testGroup("$.views.viewModels()"); /*>>>>>>>>>>>>>*/
let Book = $.views.viewModels({
getters: ["title", "price"],
extend: {nameAndPrice: function(reverse?: boolean) {
return reverse ? this._price + " for " + this._title : this._title + ": " + this._price;
}}
});
let book1 = Book("Hope", "$1.50");
assert.ok(book1.title() + ": " + book1.price() === "Hope: $1.50"
&& book1.nameAndPrice() === "Hope: $1.50"
&& book1.nameAndPrice(true) === "$1.50 for Hope",
'VM=$.views.viewModels(vmOptions)', "Create VM, instantiate and access members");
tmpl = $.templates("Title: {{:title()}}, Price: {{:price()}}, PriceName: {{:nameAndPrice(true)}}");
html = tmpl.render(book1);
assert.ok(html === "Title: Hope, Price: $1.50, PriceName: $1.50 for Hope",
'tmpl.render(book1)', "Render vm instance with template");
book1.title(book1.title() + "+");
book1.price(book1.price() + "+");
html = tmpl.render(book1);
assert.ok(html === "Title: Hope+, Price: $1.50+, PriceName: $1.50+ for Hope+",
'book1.title(newValue)', "Modify vm instance, with setters, then render template");
let MyVMs: JsViews.Hash<JsViews.ViewModel> = {};
Book = $.views.viewModels("Bk", {
getters: ["title", "price"],
extend: {nameAndPrice: function(reverse: boolean) {
return reverse ? this._price + " for " + this._title : this._title + ":" + this._price;
}}
});
assert.ok(Book===$.views.viewModels.Bk, '$.views.viewModels("Bk", vmOptions)', "Register named VM");
Book = $.views.viewModels("Bk", {
getters: ["title", "price"],
extend: {nameAndPrice: function(reverse: boolean) {
return reverse ? this._price + " for " + this._title : this._title + ":" + this._price;
}}
}, MyVMs);
assert.ok(Book===MyVMs.Bk, '$.views.viewModels("Bk", vmOptions, MyVMs)', "Register named VM on local MyVMs collection");
$.views.viewModels({
Bk: {
getters: ["title", "price"],
extend: {nameAndPrice: function(reverse: boolean) {
return reverse ? this._price + " for " + this._title : this._title + ":" + this._price;
}}
}
});
$.views.viewModels({
Bk: {
getters: ["title", "price"],
extend: {nameAndPrice: function(reverse: boolean) {
return reverse ? this._price + " for " + this._title : this._title + ":" + this._price;
}}
}
}, MyVMs);
test = $.views.viewModels.Bk("Hope", "$1.50").title();
assert.ok(test === "Hope", '$.views.viewModels({Bk: vmOptions})', "Register one or more named VMs");
test = MyVMs.Bk("Hope", "$1.50").title();
assert.ok(test === "Hope", '$.views.viewModels({Bk: vmOptions}, MyVMs)', "Register one or more named VMs on local myVms collection");
let bookData1 = {title: "Faith", price: "$10.50"}; // book (plain object)
book1 = Book.map(bookData1); // book (instance of Book View Model)
assert.ok(book1.title() === "Faith", 'Book.map(...)', "Instantiate vm instance from data, with map()");
book1.merge({ title: "Hope2", price: "$1.50" });
assert.ok(book1.title() === "Hope2", 'book.merge(...)', "Modify vm instance from data, with merge()");
test = book1.unmap();
assert.ok(test.title === "Hope2" && test.price === "$1.50", 'book.unmap()', "Round-trip data changes back to data, using unmap()");
let bookDataArray1 = [ // book array (plain objects)
{title: "Hope", price: "$1.50"},
{title: "Courage", price: "$2.50"}
];
let booksArray1 = Book.map(bookDataArray1); // book array (instances of Book View Model)
booksArray1.merge([
{title: "Hope2", price: "$1.50"},
{title: "Courage", price: "$222.50"}
]);
test = booksArray1.unmap();
assert.ok(test[1].title === "Courage" && test[1].price === "$222.50",
'bookArray = Book.map(dataArray) bookArray.merge(...) bookArray.unmap()', "Round-trip data array to array of book vm instances");
tmpl = $.templates("Name: {{:name()}}, Street: {{:address().street()}}, Phones:" +
"{{for phones()}} {{:number()}} ({{:person.name()}}) {{/for}}");
// The following code is from sample: https://www.jsviews.com/#viewmodelsapi@mergesampleadv plus use of parentRef
let myVmCollection: JsViews.Hash<JsViews.ViewModel> = {};
interface Person {
_name: string;
_comment: string;
_address: Address;
phones: () => Phone[];
}
interface Address {
_street: string;
}
interface Phone {
_number: string;
id: string;
}
$.views.viewModels({
Person: {
getters: [
{getter: "name", defaultVal: "No name"}, // Compiled name() get/set
{getter: "address", type: "Address", defaultVal: defaultAddress},
{getter: "phones", type: "Phone", defaultVal: [], parentRef: "person"}
],
extend: {
name: myNameGetSet, // Override name() get/set
addPhone: addPhone,
comment: comment // Additional get/set property, not initialized by data)
},
id: function(vm, plain) { // Callback function to determine 'identity'
return vm.personId === plain.personId;
}
},
Address: {
getters: ["street"]
},
Phone: {
getters: ["number"],
id: "phoneId" // Treat phoneId as 'primary key', for identity
}
}, myVmCollection); // Store View Models (typed hierarchy) on myVmCollection
// Override generated name() get/set
function myNameGetSet(this: Person, val: string) {
if (!arguments.length) { // This is standard compiled get/set code
return this._name; // If there is no argument, use as a getter
}
this._name = val; // If there is an argument, use as a setter
}
// Method for Person class
function addPhone(this: Person, phoneNo: string) { // Uses myVmCollection.Phone() to construct new instance
this.phones().push(myVmCollection.Phone(phoneNo, "person", this));
}
// get/set for comment (state on View Model instance, not initialized from data)
function comment(this: Person, val: string) {
if (!arguments.length) {
return this._comment; // If there is no argument, use as a getter
}
this._comment = val;
}
function defaultAddress(this: {name: string}) { // Function providing default address if undefined in data
return {street: 'No street for "' + this.name + '"'};
}
// First version of data - array of objects (e.g. from JSON request):
let peopleData = [
{
personId: "1",
address: {
street: "2nd Ave"
}
},
{
personId: "2",
name: "Pete",
phones: [
{number: "333 333 3333", phoneId: "2a"}
]
}
];
// Second version of data - JSON string (e.g. new JSON request):
let peopleData2 = '[{"personId":"2","name":"Peter","address":{"street":"11 1st Ave"},'
+ '"phones":[{"number":"111 111 9999","phoneId":"1a"},{"number":"333 333 9999","phoneId":"2a"}]}]';
// Instantiate View Model hierarchy using map()
let people = myVmCollection.Person.map(peopleData);
// Render template against people (array of Person instances)
html = tmpl.render(people);
assert.equal(html, 'Name: No name, Street: 2nd Ave, Phones:Name: Pete, Street: No street for "Pete", Phones: 333 333 3333 (Pete) ',
'Person.map(peopleData)', "map data to full VM hierarchy");
people.merge(peopleData2);
html = tmpl.render(people);
assert.equal(html, 'Name: Peter, Street: 11 1st Ave, Phones: 111 111 9999 (Peter) 333 333 9999 (Peter) ',
'people.merge(peopleData2)', "Merge data on full hierarchy");
people.merge(peopleData);
html = tmpl.render(people);
assert.equal(html, 'Name: No name, Street: 2nd Ave, Phones:Name: Pete, Street: No street for "Pete", Phones: 333 333 3333 (Pete) ',
'people.merge(peopleData)', "Merge back to previous data on full hierarchy");
people[0].name("newName");
html = tmpl.render(people);
assert.equal(html, 'Name: newName, Street: 2nd Ave, Phones:Name: Pete, Street: No street for "Pete", Phones: 333 333 3333 (Pete) ',
'people[0].name("newName")', "Change a property, deep in hierarchy");
people[0].addPhone("xxx xxx xxxx");
html = tmpl.render(people);
assert.equal(html, 'Name: newName, Street: 2nd Ave, Phones: xxx xxx xxxx (newName) Name: Pete, Street: No street for "Pete", Phones: 333 333 3333 (Pete) ',
'people[0].addPhone("xxx xxx xxxx")', "Insert instance, deep in hierarchy");
let updatedPeopleData = people.unmap();
assert.ok(updatedPeopleData[0].name === "newName" && updatedPeopleData[0].phones[0].number === "xxx xxx xxxx",
'updatedPeopleData = people.unmap()', "Round-trip back to data");
/*<<<<<<<<<<<<<*/ assert.testGroup("view"); /*>>>>>>>>>>>>>*/
test = '';
$.views.helpers("hlp", 555);
$.views.tags("mytag", {
init: function(tagCtx, linkCtx, ctx) {
let view = tagCtx.view;
test += (view === this.tagCtx.view)
+ view.ctxPrm("foo")
+ "(" + view.getIndex()
+ view.get("array").get(true, "item").index + ")";
},
show: function(view) {
test += (view.parent.views._1 === view && view.parent.parent === this.tagCtx.view)
+ view.parent.content.markup
+ view.type
+ view.parent.type
+ view.root.type
+ view.getRsc("helpers", "hlp");
} as (this: JsViews.Tag, view: JsViews.View) => void,
template: "startTag {{include tmpl=#content /}} endTag"
});
tmpl = $.templates("{{if true ~foo='FOO'}}{{for start=0 end=1}}{{mytag a 'b' 33}} in tag {{:~tag.show(#view)}} {{/mytag}}{{/for}}{{/if}}");
html = tmpl();
assert.equal(test, "trueFOO(00)true in tag {{:~tag.show(#view)}} includemytagdata555",
'view.get(), view.parent, view.data, view.root etc etc', "View APIs tested");
/*<<<<<<<<<<<<<*/ assert.testGroup("tagCtx"); /*>>>>>>>>>>>>>*/
$.views.tags("mytag", {
init: function(tagCtx, linkCtx, ctx) {
test = '' + linkCtx
+ tagCtx.ctxPrm("foo")
+ tagCtx.view.type
+ tagCtx.args[1]
+ tagCtx.props.bar
+ tagCtx.ctx.foo
+ (tagCtx.ctx === ctx)
+ tagCtx.bndArgs()
+ tagCtx.cvtArgs()
+ tagCtx.index
+ (this.tagCtxs[0] === tagCtx)
+ tagCtx.params.props.bar
+ (tagCtx.params.ctx && tagCtx.params.ctx.foo)
+ tagCtx.render(0, {foo: "FOO2"})
+ (tagCtx.tag === this)
+ tagCtx.tag.tagName
+ (tagCtx.tmpl === null)
+ (tagCtx.tmpl && tagCtx.tmpl.markup)
+ (tagCtx.content && tagCtx.content.markup);
}
});
tmpl = $.templates("{{mytag a 'mode' bar=b ~foo='FOO'}}inner{{:~foo}}{{/mytag}}");
html = tmpl({a: "A", b: "B"});
assert.equal(test, "falseFOOdatamodeBFOOtrueA,modeA,mode0trueb'FOO'innerFOO2truemytagfalseinner{{:~foo}}inner{{:~foo}}",
'tagCtx.ctxPrm(), tagCtx.view, tagCtx.bndArgs(), tagCtx.params etc etc', "TagCtx APIs tested, {{myTag ...}}...{{/myTag}}");
tmpl = $.templates("{{mytag/}}");
html = tmpl({a: "A", b: "B"});
assert.equal(test, "falseundefineddataundefinedundefinedundefinedtrue0trueundefinedundefinedtruemytagfalsefalsefalse",
'tagCtx.ctxPrm(), tagCtx.view, tagCtx.bndArgs(), tagCtx.params etc etc', "TagCtx APIs tested, {{myTag/}}");
/*<<<<<<<<<<<<<*/ assert.testGroup("settings"); /*>>>>>>>>>>>>>*/
test = $.views.settings.delimiters();
$.views.settings.delimiters("<%", "%>", "&");
$.views.settings.allowCode(true);
assert.equal("" + $.views.settings.delimiters() + $.views.settings.allowCode(), "<%,%>,&true", "settings.delimiters(), settings.allowCode()", "get/set settings");
$.views.settings.delimiters(test);
$.views.settings.allowCode(false);
})();
+1 -1
View File
@@ -21,4 +21,4 @@
"index.d.ts",
"jsrender-tests.ts"
]
}
}
-62
View File
@@ -1,80 +1,18 @@
{
"extends": "dtslint/dt.json",
"rules": {
"adjacent-overload-signatures": false,
"array-type": false,
"arrow-return-shorthand": false,
"ban-types": false,
"callable-types": false,
"comment-format": false,
"dt-header": false,
"npm-naming": false,
"eofline": false,
"export-just-namespace": false,
"import-spacing": false,
"interface-name": false,
"interface-over-type-literal": false,
"jsdoc-format": false,
"max-line-length": false,
"member-access": false,
"new-parens": false,
"no-any-union": false,
"no-boolean-literal-compare": false,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": false,
"no-construct": false,
"no-declare-current-package": false,
"no-duplicate-imports": false,
"no-duplicate-variable": false,
"no-empty-interface": false,
"no-for-in-array": false,
"no-inferrable-types": false,
"no-internal-module": false,
"no-irregular-whitespace": false,
"no-mergeable-namespace": false,
"no-misused-new": false,
"no-namespace": false,
"no-object-literal-type-assertion": false,
"no-padding": false,
"no-redundant-jsdoc": false,
"no-redundant-jsdoc-2": false,
"no-redundant-undefined": false,
"no-reference-import": false,
"no-relative-import-in-test": false,
"no-self-import": false,
"no-single-declare-module": false,
"no-string-throw": false,
"no-unnecessary-callback-wrapper": false,
"no-unnecessary-class": false,
"no-unnecessary-generics": false,
"no-unnecessary-qualifier": false,
"no-unnecessary-type-assertion": false,
"no-useless-files": false,
"no-var-keyword": false,
"no-var-requires": false,
"no-void-expression": false,
"no-trailing-whitespace": false,
"object-literal-key-quotes": false,
"object-literal-shorthand": false,
"one-line": false,
"one-variable-per-declaration": false,
"only-arrow-functions": false,
"prefer-conditional-expression": false,
"prefer-const": false,
"prefer-declare-function": false,
"prefer-for-of": false,
"prefer-method-signature": false,
"prefer-template": false,
"radix": false,
"semicolon": false,
"space-before-function-paren": false,
"space-within-parens": false,
"strict-export-declare-modifiers": false,
"trim-file": false,
"triple-equals": false,
"typedef-whitespace": false,
"unified-signatures": false,
"void-return": false,
"whitespace": false
}
}