If readyState == DONE or readyState == INIT, terminate this overall series of steps without doing anything else.
+ *
Set readyState to DONE.
+ *
If there are any tasks from the object's FileSaver task source in one of the task queues, then remove those tasks.
+ *
Terminate the write algorithm being processed.
+ *
Set the error attribute to a DOMError object of type "AbortError".
+ *
Fire a progress event called abort
+ *
Fire a progress event called writeend
+ *
Terminate this algorithm.
+ *
+ */
+ abort():void;
+
+ /**
+ * The blob is being written.
+ * @readonly
+ */
+ INIT:number;
+
+ /**
+ * The object has been constructed, but there is no pending write.
+ * @readonly
+ */
+ WRITING:number;
+
+ /**
+ * The entire Blob has been written to the file, an error occurred during the write, or the write was aborted using abort(). The FileSaver is no longer writing the blob.
+ * @readonly
+ */
+ DONE:number;
+
+ /**
+ * The FileSaver object can be in one of 3 states. The readyState attribute, on getting, must return the current state, which must be one of the following values:
+ *
+ *
INIT
+ *
WRITING
+ *
DONE
+ *
+ * @readonly
+ */
+ readyState:number;
+
+ /**
+ * The last error that occurred on the FileSaver.
+ * @readonly
+ */
+ error:DOMError;
+
+ /**
+ * Handler for writestart events
+ */
+ onwritestart:Function;
+
+ /**
+ * Handler for progress events.
+ */
+ onprogress:Function;
+
+ /**
+ * Handler for write events.
+ */
+ onwrite:Function;
+
+ /**
+ * Handler for abort events.
+ */
+ onabort:Function;
+
+ /**
+ * Handler for error events.
+ */
+ onerror:Function;
+
+ /**
+ * Handler for writeend events.
+ */
+ onwriteend:Function;
+}
+
+var FileSaver: {
+ /**
+ * When the FileSaver constructor is called, the user agent must return a new FileSaver object with readyState set to INIT.
+ * This constructor must be visible when the script's global object is either a Window object or an object implementing the WorkerUtils interface.
+ */
+ new(data:Blob): FileSaver;
+}
+
+/**
+ * This interface expands on the FileSaver interface to allow for multiple write actions, rather than just saving a single Blob.
+ */
+interface FileWriter extends FileSaver {
+ /**
+ * The byte offset at which the next write to the file will occur. This must be no greater than length.
+ * A newly-created FileWriter must have position set to 0.
+ */
+ position:number;
+
+ /**
+ * The length of the file. If the user does not have read access to the file, this must be the highest byte offset at which the user has written.
+ */
+ length:number;
+
+ /**
+ * Write the supplied data to the file at position.
+ * @param data The blob to write.
+ */
+ write(data:Blob):void;
+
+ /**
+ * Seek sets the file position at which the next write will occur.
+ * @param offset If nonnegative, an absolute byte offset into the file. If negative, an offset back from the end of the file.
+ */
+ seek(offset:number):void;
+
+ /**
+ * Changes the length of the file to that specified. If shortening the file, data beyond the new length must be discarded. If extending the file, the existing data must be zero-padded up to the new length.
+ * @param size The size to which the length of the file is to be adjusted, measured in bytes.
+ */
+ truncate(size:number):void;
+}
+
+/**
+ * This interface lets users write, truncate, and append to files using simple synchronous calls.
+ * This interface is specified to be used only within Web Workers (WorkerUtils [WEBWORKERS]).
+ */
+interface FileWriterSync {
+ /**
+ * The byte offset at which the next write to the file will occur. This must be no greater than length.
+ */
+ position:number;
+
+ /**
+ * The length of the file. If the user does not have read access to the file, this must be the highest byte offset at which the user has written.
+ */
+ length:number;
+
+ /**
+ * Write the supplied data to the file at position. Upon completion, position will increase by data.size.
+ * @param data The blob to write.
+ */
+ write(data:Blob):void;
+
+ /**
+ * Seek sets the file position at which the next write will occur.
+ * @param offset An absolute byte offset into the file. If offset is greater than length, length is used instead. If offset is less than zero, length is added to it, so that it is treated as an offset back from the end of the file. If it is still less than zero, zero is used.
+ */
+ seek(offset:number):void;
+
+ /**
+ * Changes the length of the file to that specified. If shortening the file, data beyond the new length must be discarded. If extending the file, the existing data must be zero-padded up to the new length.
+ * Upon successful completion:
+ *
+ *
length must be equal to size.
+ *
position must be the lesser of
+ *
+ *
its pre-truncate value,
+ *
size.
+ *
+ *
+ *
+ * @param size The size to which the length of the file is to be adjusted, measured in bytes.
+ */
+ truncate(size:number):void;
+}
diff --git a/jasmine/jasmine-tests.ts b/jasmine/jasmine-tests.ts
index 32339676a6..46507d68de 100644
--- a/jasmine/jasmine-tests.ts
+++ b/jasmine/jasmine-tests.ts
@@ -60,7 +60,7 @@ describe("Included matchers:", () => {
foo: 'foo'
};
expect(a.foo).toBeDefined();
- expect(a.bar).not.toBeDefined();
+ expect((a).bar).not.toBeDefined();
});
it("The `toBeUndefined` matcher compares against `undefined`", () => {
@@ -68,7 +68,7 @@ describe("Included matchers:", () => {
foo: 'foo'
};
expect(a.foo).not.toBeUndefined();
- expect(a.bar).toBeUndefined();
+ expect((a).bar).toBeUndefined();
});
it("The 'toBeNull' matcher compares against null", () => {
@@ -120,7 +120,7 @@ describe("Included matchers:", () => {
return 1 + 2;
};
var bar = () => {
- return a + 1;
+ //return a + 1;
};
expect(foo).not.toThrow();
expect(bar).toThrow();
@@ -439,7 +439,7 @@ describe("Asynchronous specs", () => {
currentWindowOnload(null);
}
- document.querySelector('.version').innerHTML = jasmineEnv.versionString();
+ (document.querySelector('.version')).innerHTML = jasmineEnv.versionString();
execJasmine();
};
diff --git a/jasmine/jasmine.d.ts b/jasmine/jasmine.d.ts
index 0d16559e92..56f41b48f1 100644
--- a/jasmine/jasmine.d.ts
+++ b/jasmine/jasmine.d.ts
@@ -23,7 +23,6 @@ declare function runs(asyncMethod: Function): void;
declare function waitsFor(latchMethod: () => bool, failureMessage: string, timeout?: number): void;
declare function waits(timeout?: number): void;
-
declare module jasmine {
var Clock: Clock;
@@ -165,6 +164,8 @@ declare module jasmine {
toBeLessThan(expected): bool;
toBeGreaterThan(expected): bool;
toBeCloseTo(expected, precision): bool;
+ toContainHtml(expected: string): bool;
+ toContainText(expected: string): bool;
toThrow(expected? ): bool;
not: Matchers;
@@ -291,4 +292,6 @@ declare module jasmine {
Clock: Clock;
util: Util;
}
+
+ export var HtmlReporter: any;
}
\ No newline at end of file
diff --git a/jquery/jquery-tests.ts b/jquery/jquery-tests.ts
index 29da1c542d..e69795b92b 100644
--- a/jquery/jquery-tests.ts
+++ b/jquery/jquery-tests.ts
@@ -2240,3 +2240,15 @@ $('#item').click(function(e) {
if (e.ctrlKey) { console.log('control pressed'); }
if (e.altKey) { console.log('alt pressed'); }
});
+
+function test_addBack() {
+ $('li.third-item').nextAll().addBack().css('background-color', 'red');
+
+ $("div.left, div.right").find("div, div > p").addClass("border");
+
+ // First Example
+ $("div.before-addback").find("p").addClass("background");
+
+ // Second Example
+ $("div.after-addback").find("p").addBack().addClass("background");
+}
\ No newline at end of file
diff --git a/jquery/jquery.d.ts b/jquery/jquery.d.ts
index 0924ce6bb6..9cc0fb9cb5 100644
--- a/jquery/jquery.d.ts
+++ b/jquery/jquery.d.ts
@@ -274,7 +274,10 @@ interface JQueryStatic {
*******/
proxy(fn : (...args: any[]) => any, context: any, ...args: any[]): any;
proxy(context: any, name: string, ...args: any[]): any;
- Deferred(fn? : (d: JQueryDeferred) => any): JQueryDeferred;
+ Deferred: {
+ (fn?: (d: JQueryDeferred) => any): JQueryDeferred;
+ new(fn?: (d: JQueryDeferred) => any): JQueryDeferred;
+ };
Event(name:string, eventProperties?:any): JQueryEventObject;
/*********
@@ -371,6 +374,10 @@ interface JQuery {
addClass(classNames: string): JQuery;
addClass(func: (index: any, currentClass: any) => string): JQuery;
+ // http://api.jquery.com/addBack/
+ addBack(selector?: string): JQuery;
+
+
attr(attributeName: string): string;
attr(attributeName: string, value: any): JQuery;
attr(map: { [key: string]: any; }): JQuery;
diff --git a/knockout/all-tests.ts b/knockout/all-tests.ts
new file mode 100644
index 0000000000..3fe7a471f1
--- /dev/null
+++ b/knockout/all-tests.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/knockout/knockout.d.ts b/knockout/knockout.d.ts
index 58479d846e..aefcc797a4 100644
--- a/knockout/knockout.d.ts
+++ b/knockout/knockout.d.ts
@@ -81,6 +81,9 @@ interface KnockoutObservableArrayStatic {
(): KnockoutObservableArray;
(value: any[]): KnockoutObservableArray;
+
+ new(): KnockoutObservableArray;
+ new(value: any[]): KnockoutObservableArray;
}
interface KnockoutObservableArray extends KnockoutObservableArrayFunctions {
@@ -99,10 +102,17 @@ interface KnockoutObservableStatic {
(value: number): KnockoutObservableNumber;
(value: bool): KnockoutObservableBool;
(value?: any): KnockoutObservableAny;
+
+ new(value: string): KnockoutObservableString;
+ new(value: Date): KnockoutObservableDate;
+ new(value: number): KnockoutObservableNumber;
+ new(value: bool): KnockoutObservableBool;
+ new(value?: any): KnockoutObservableAny;
}
/** use as method to get/set the value */
interface KnockoutObservableBase extends KnockoutObservableFunctions {
+ getSubscriptionsCount(): number;
}
/** use as method to get/set the value
@@ -229,56 +239,184 @@ interface KnockoutExtenders {
interface KnockoutUtils {
+ //////////////////////////////////
+ // utils.domManipulation.js
+ //////////////////////////////////
+
+ simpleHtmlParse(html: string);
+
+ jQueryHtmlParse(html: string);
+
+ parseHtmlFragment(html: string);
+
+ setHtml(node: Element, html: string): void;
+
+ setHtml(node: Element, html: () => string): void;
+
+ //////////////////////////////////
+ // utils.domData.js
+ //////////////////////////////////
+
+ domData: {
+ get (node: Element, key: string);
+
+ set (node: Element, key: string, value: any);
+
+ getAll(node: Element, createIfNotFound: bool);
+
+ clear(node: Element);
+ };
+
+ //////////////////////////////////
+ // utils.domNodeDisposal.js
+ //////////////////////////////////
+
+ domNodeDisposal: {
+ addDisposeCallback(node: Element, callback: Function);
+
+ removeDisposeCallback(node: Element, callback: Function);
+
+ cleanNode(node: Element);
+
+ removeNode(node: Element);
+ };
+
+ //////////////////////////////////
+ // utils.js
+ //////////////////////////////////
+
fieldsIncludedWithJsonPost: any[];
arrayForEach(array: any[], action: (any) => void ): void;
+
arrayIndexOf(array: any[], item: any): number;
+
arrayFirst(array: any[], predicate: (item) => bool, predicateOwner?: any): any;
+
arrayRemoveItem(array: any[], itemToRemove: any): void;
+
arrayGetDistinctValues(array: any[]): any[];
+
arrayMap(array: any[], mapping: (item) => any): any[];
+
arrayFilter(array: any[], predicate: (item) => bool): any[];
+
arrayPushAll(array: any[], valuesToPush: any[]): any[];
extend(target, source);
emptyDomNode(domNode): void;
+
moveCleanedNodesToContainerElement(nodes: any[]): HTMLElement;
+
cloneNodes(nodesArray: any[], shouldCleanNodes: bool): any[];
+
setDomNodeChildren(domNode: any, childNodes: any[]): void;
+
replaceDomNodes(nodeToReplaceOrNodeArray: any, newNodesArray: any[]): void;
+
setOptionNodeSelectionState(optionNode: any, isSelected: bool): void;
+
stringTrim(str: string): string;
+
stringTokenize(str: string, delimiter: string): string;
+
stringStartsWith(str: string, startsWith: string): string;
+
domNodeIsContainedBy(node: any, containedByNode: any): bool;
+
domNodeIsAttachedToDocument(node: any): bool;
+
tagNameLower(element: any): string;
+
registerEventHandler(element: any, eventType: any, handler: Function): void;
+
triggerEvent(element: any, eventType: any): void;
+
unwrapObservable(value: any): any;
+
toggleDomNodeCssClass(node: any, className: string, shouldHaveClass: bool): void;
+
setTextContent(element: any, textContent: string): void;
+
setElementName(element: any, name: string): void;
+
ensureSelectElementIsRenderedCorrectly(selectElement);
+
forceRefresh(node: any): void;
+
ensureSelectElementIsRenderedCorrectly(selectElement: any): void;
+
range(min: any, max: any): any;
+
makeArray(arrayLikeObject: any): any[];
+
getFormFields(form: any, fieldName: string): any[];
+
parseJson(jsonString: string): any;
+
stringifyJson(data: any, replacer: Function, space: string): string;
+
postJson(urlOrForm: any, data: any, options: any): void;
- setHtml(node: Element, html: string): void;
- setHtml(node: Element, html: () => string): void;
ieVersion: number;
- isIe6: bool;
- isIe7: bool;
- domNodeDisposal;
+ isIe6: bool;
+
+ isIe7: bool;
}
+//////////////////////////////////
+// templateSources.js
+//////////////////////////////////
+
+interface KnockoutTemplateSourcesDomElement {
+
+ text(valueToWrite?);
+
+ data(key, valueToWrite?);
+}
+
+
+interface KnockoutTemplateSources {
+
+ domElement: KnockoutTemplateSourcesDomElement;
+
+ anonymousTemplate: {
+
+ prototype: KnockoutTemplateSourcesDomElement;
+
+ new (element: Element): KnockoutTemplateSourcesDomElement;
+ };
+};
+
+//////////////////////////////////
+// nativeTemplateEngine.js
+//////////////////////////////////
+
+interface KnockoutNativeTemplateEngine {
+
+ renderTemplateSource(templateSource, bindingContext, options?);
+}
+
+//////////////////////////////////
+// templateEngine.js
+//////////////////////////////////
+
+interface KnockoutTemplateEngine extends KnockoutNativeTemplateEngine {
+
+ createJavaScriptEvaluatorBlock(script: string);
+
+ makeTemplateSource(template, templateDocument);
+
+ renderTemplate(template, bindingContext, options, templateDocument);
+
+ isTemplateRewritten(template, templateDocument): bool;
+
+ rewriteTemplate(template, rewriterCallback, templateDocument);
+}
+
+/////////////////////////////////
interface KnockoutStatic {
utils: KnockoutUtils;
@@ -305,6 +443,84 @@ interface KnockoutStatic {
dataFor(node: any): any;
removeNode(node: Element);
cleanNode(node: Element);
+ renderTemplate(template: Function, viewModel: any, options?: any, target?: any, renderMode?: any);
+ renderTemplate(template: string, viewModel: any, options?: any, target?: any, renderMode?: any);
+
+ //////////////////////////////////
+ // templateSources.js
+ //////////////////////////////////
+
+ templateSources: KnockoutTemplateSources;
+
+ //////////////////////////////////
+ // templateEngine.js
+ //////////////////////////////////
+
+ templateEngine: {
+
+ prototype: KnockoutTemplateEngine;
+
+ new (): KnockoutTemplateEngine;
+ };
+
+ //////////////////////////////////
+ // templateRewriting.js
+ //////////////////////////////////
+
+ templateRewriting: {
+
+ ensureTemplateIsRewritten(template, templateEngine, templateDocument);
+
+ memoizeBindingAttributeSyntax(htmlString: string, templateEngine: KnockoutTemplateEngine);
+
+ applyMemoizedBindingsToNextSibling(bindings);
+ };
+
+ //////////////////////////////////
+ // nativeTemplateEngine.js
+ //////////////////////////////////
+
+ nativeTemplateEngine: {
+
+ prototype: KnockoutNativeTemplateEngine;
+
+ new (): KnockoutNativeTemplateEngine;
+
+ instance: KnockoutNativeTemplateEngine;
+ };
+
+ //////////////////////////////////
+ // jqueryTmplTemplateEngine.js
+ //////////////////////////////////
+
+ jqueryTmplTemplateEngine: {
+
+ prototype: KnockoutTemplateEngine;
+
+ renderTemplateSource(templateSource, bindingContext, options);
+
+ createJavaScriptEvaluatorBlock(script: string): string;
+
+ addTemplate(templateName, templateMarkup);
+ };
+
+ //////////////////////////////////
+ // templating.js
+ //////////////////////////////////
+
+ setTemplateEngine(templateEngine: KnockoutNativeTemplateEngine);
+
+ renderTemplate(template, dataOrBindingContext, options, targetNodeOrNodeArray, renderMode);
+
+ renderTemplateForEach(template, arrayOrObservableArray, options, targetNode, parentBindingContext);
+
+ expressionRewriting: {
+ bindingRewriteValidators: any;
+ };
+
+ /////////////////////////////////
+
+ bindingProvider: any;
}
declare var ko: KnockoutStatic;
\ No newline at end of file
diff --git a/knockout/tests/knockout-templatingBehaviors-tests.ts b/knockout/tests/knockout-templatingBehaviors-tests.ts
new file mode 100644
index 0000000000..b000015f2e
--- /dev/null
+++ b/knockout/tests/knockout-templatingBehaviors-tests.ts
@@ -0,0 +1,886 @@
+///
+///
+///
+
+declare var $;
+
+var dummyTemplateEngine = function (templates?) {
+ var inMemoryTemplates = templates || {};
+ var inMemoryTemplateData = {};
+
+ function dummyTemplateSource(id) {
+ this.id = id;
+ }
+ dummyTemplateSource.prototype = {
+ text: function(val) {
+ if (arguments.length >= 1)
+ inMemoryTemplates[this.id] = val;
+ return inMemoryTemplates[this.id];
+ },
+ data: function(key, val) {
+ if (arguments.length >= 2) {
+ inMemoryTemplateData[this.id] = inMemoryTemplateData[this.id] || {};
+ inMemoryTemplateData[this.id][key] = val;
+ }
+ return (inMemoryTemplateData[this.id] || {})[key];
+ }
+ }
+
+ this.makeTemplateSource = function(template) {
+ if (typeof template == "string")
+ return new dummyTemplateSource(template); // Named template comes from the in-memory collection
+ else if ((template.nodeType == 1) || (template.nodeType == 8))
+ return new ko.templateSources.anonymousTemplate(template); // Anonymous template
+ };
+
+ this.renderTemplateSource = function (templateSource, bindingContext, options) {
+ var data = bindingContext['$data'];
+ options = options || {};
+ var templateText = templateSource.text();
+ if (typeof templateText == "function")
+ templateText = templateText(data, options);
+
+ templateText = options.showParams ? templateText + ", data=" + data + ", options=" + options : templateText;
+ var templateOptions = options.templateOptions; // Have templateOptions in scope to support [js:templateOptions.foo] syntax
+
+ var result;
+ //with (bindingContext)
+ {
+ //with (data || {})
+ {
+ //with (options.templateRenderingVariablesInScope || {})
+ {
+ // Dummy [renderTemplate:...] syntax
+ result = templateText.replace(/\[renderTemplate\:(.*?)\]/g, function (match, templateName) {
+ return ko.renderTemplate(templateName, data, options);
+ });
+
+
+ var evalHandler = function (match, script) {
+ try {
+ var evalResult = eval(script);
+ return (evalResult === null) || (evalResult === undefined) ? "" : evalResult.toString();
+ } catch (ex) {
+ throw new Error("Error evaluating script: [js: " + script + "]\n\nException: " + ex.toString());
+ }
+ }
+
+ // Dummy [[js:...]] syntax (in case you need to use square brackets inside the expression)
+ result = result.replace(/\[\[js\:([\s\S]*?)\]\]/g, evalHandler);
+
+ // Dummy [js:...] syntax
+ result = result.replace(/\[js\:([\s\S]*?)\]/g, evalHandler);
+ }
+ }
+ }
+
+ // Use same HTML parsing code as real template engine so as to trigger same combination of IE weirdnesses
+ // Also ensure resulting nodelist is an array to mimic what the default templating engine does, so we see the effects of not being able to remove dead memo comment nodes.
+ return ko.utils.arrayPushAll([], ko.utils.parseHtmlFragment(result));
+ };
+
+ this.rewriteTemplate = function (template, rewriterCallback) {
+ // Only rewrite if the template isn't a function (can't rewrite those)
+ var templateSource = new ko.templateSources.anonymousTemplate(template); //this.makeTemplateSource(template);
+ if (typeof templateSource.text() != "function")
+ return ko.templateEngine.prototype.rewriteTemplate.call(this, template, rewriterCallback);
+ };
+ this.createJavaScriptEvaluatorBlock = function (script) { return "[js:" + script + "]"; };
+};
+dummyTemplateEngine.prototype = new ko.templateEngine();
+
+describe('Templating', function() {
+ beforeEach(function() {
+ ko.setTemplateEngine(new ko.nativeTemplateEngine());
+ });
+ //beforeEach(jasmine.prepareTestNode);
+ var testNode: any;
+
+ it('Template engines can return an array of DOM nodes', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ x: [document.createElement("div"), document.createElement("span")] }));
+ ko.renderTemplate("x", null);
+ });
+
+ it('Should not be able to render a template until a template engine is provided', function () {
+ var threw = false;
+ ko.setTemplateEngine(undefined);
+ try { ko.renderTemplate("someTemplate", {}) }
+ catch (ex) { threw = true }
+ expect(threw).toEqual(true);
+ });
+
+ it('Should be able to render a template into a given DOM element', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "ABC" }));
+ ko.renderTemplate("someTemplate", null, null, testNode);
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("ABC");
+ });
+
+ it('Should be able to render an empty template', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({ emptyTemplate: "" }));
+ ko.renderTemplate("emptyTemplate", null, null, testNode);
+ expect(testNode.childNodes.length).toEqual(0);
+ });
+
+ it('Should be able to access newly rendered/inserted elements in \'afterRender\' callaback', function () {
+ var passedElement, passedDataItem;
+ var myCallback = function(elementsArray, dataItem) {
+ expect(elementsArray.length).toEqual(1);
+ passedElement = elementsArray[0];
+ passedDataItem = dataItem;
+ }
+ var myModel = {};
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "ABC" }));
+ ko.renderTemplate("someTemplate", myModel, { afterRender: myCallback }, testNode);
+ expect(passedElement.nodeValue).toEqual("ABC");
+ expect(passedDataItem).toEqual(myModel);
+ });
+
+ it('Should automatically rerender into DOM element when dependencies change', function () {
+ var dependency = new ko.observable("A");
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: function () {
+ return "Value = " + dependency();
+ }
+ }));
+
+ ko.renderTemplate("someTemplate", null, null, testNode);
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("Value = A");
+
+ dependency("B");
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("Value = B");
+ });
+
+ it('Should not rerender DOM element if observable accessed in \'afterRender\' callaback is changed', function () {
+ var observable = new ko.observable("A"), count = 0;
+ var myCallback = function(elementsArray, dataItem) {
+ observable(); // access observable in callback
+ };
+ var myTemplate = function() {
+ return "Value = " + (++count);
+ };
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: myTemplate }));
+ ko.renderTemplate("someTemplate", {}, { afterRender: myCallback }, testNode);
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("Value = 1");
+
+ observable("B");
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("Value = 1");
+ });
+
+ it('If the supplied data item is observable, evaluates it and has subscription on it', function () {
+ var observable = new ko.observable("A");
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: function (data) {
+ return "Value = " + data;
+ }
+ }));
+ ko.renderTemplate("someTemplate", observable, null, testNode);
+ expect(testNode.innerHTML).toEqual("Value = A");
+
+ observable("B");
+ expect(testNode.innerHTML).toEqual("Value = B");
+ });
+
+ it('Should stop updating DOM nodes when the dependency next changes if the DOM node has been removed from the document', function () {
+ var dependency = new ko.observable("A");
+ var template = { someTemplate: function () { return "Value = " + dependency() } };
+ ko.setTemplateEngine(new dummyTemplateEngine(template));
+
+ ko.renderTemplate("someTemplate", null, null, testNode);
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("Value = A");
+
+ testNode.parentNode.removeChild(testNode);
+ dependency("B");
+ expect(testNode.childNodes.length).toEqual(1);
+ expect(testNode.innerHTML).toEqual("Value = A");
+ });
+
+ it('Should be able to render a template using data-bind syntax', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "template output" }));
+ testNode.innerHTML = "";
+ ko.applyBindings(null, testNode);
+ expect(testNode.childNodes[0].innerHTML).toEqual("template output");
+ });
+
+ it('Should be able to tell data-bind syntax which object to pass as data for the template (otherwise, uses viewModel)', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "result = [js: childProp]" }));
+ testNode.innerHTML = "";
+ ko.applyBindings({ someProp: { childProp: 123} }, testNode);
+ expect(testNode.childNodes[0].innerHTML).toEqual("result = 123");
+ });
+
+ it('Should re-render a named template when its data item notifies about mutation', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "result = [js: childProp]" }));
+ testNode.innerHTML = "";
+
+ var myData = ko.observable({ childProp: 123 });
+ ko.applyBindings({ someProp: myData }, testNode);
+ expect(testNode.childNodes[0].innerHTML).toEqual("result = 123");
+
+ // Now mutate and notify
+ myData().childProp = 456;
+ myData.valueHasMutated();
+ expect(testNode.childNodes[0].innerHTML).toEqual("result = 456");
+ });
+
+ it('Should stop tracking inner observables immediately when the container node is removed from the document', function() {
+ var innerObservable = ko.observable("some value");
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "result = [js: childProp()]" }));
+ testNode.innerHTML = "";
+ ko.applyBindings({ someProp: { childProp: innerObservable} }, testNode);
+
+ expect(innerObservable.getSubscriptionsCount()).toEqual(1);
+ ko.removeNode(testNode.childNodes[0]);
+ expect(innerObservable.getSubscriptionsCount()).toEqual(0);
+ });
+
+ it('Should be able to pick template via an observable model property', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ firstTemplate: "First template output",
+ secondTemplate: "Second template output"
+ }));
+
+ var chosenTemplate = ko.observable("firstTemplate");
+ testNode.innerHTML = "";
+ ko.applyBindings({ chosenTemplate: chosenTemplate }, testNode);
+ expect(testNode.childNodes[0].innerHTML).toEqual("First template output");
+
+ chosenTemplate("secondTemplate");
+ expect(testNode.childNodes[0].innerHTML).toEqual("Second template output");
+ });
+
+ it('Should be able to pick template as a function of the data item using data-bind syntax, with the binding context available as a second parameter', function () {
+ var templatePicker = function(dataItem, bindingContext) {
+ // Having the entire binding context available means you can read sibling or parent level properties
+ expect(bindingContext.$parent.anotherProperty).toEqual(456);
+ return dataItem.myTemplate;
+ };
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "result = [js: childProp]" }));
+ testNode.innerHTML = "";
+ ko.applyBindings({ someProp: { childProp: 123, myTemplate: "someTemplate" }, templateSelectorFunction: templatePicker, anotherProperty: 456 }, testNode);
+ expect(testNode.childNodes[0].innerHTML).toEqual("result = 123");
+ });
+
+ it('Should be able to chain templates, rendering one from inside another', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: "outer template output, [renderTemplate:innerTemplate]", // [renderTemplate:...] is special syntax supported by dummy template engine
+ innerTemplate: "inner template output "
+ }));
+ testNode.innerHTML = "";
+ ko.applyBindings(null, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("outer template output, inner template output 123");
+ });
+
+ it('Should rerender chained templates when their dependencies change, without rerendering parent templates', function () {
+ var observable = new ko.observable("ABC");
+ var timesRenderedOuter = 0, timesRenderedInner = 0;
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: function () { timesRenderedOuter++; return "outer template output, [renderTemplate:innerTemplate]" }, // [renderTemplate:...] is special syntax supported by dummy template engine
+ innerTemplate: function () { timesRenderedInner++; return observable() }
+ }));
+ testNode.innerHTML = "";
+ ko.applyBindings(null, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("outer template output, abc");
+ expect(timesRenderedOuter).toEqual(1);
+ expect(timesRenderedInner).toEqual(1);
+
+ observable("DEF");
+ expect(testNode.childNodes[0]).toContainHtml("outer template output, def");
+ expect(timesRenderedOuter).toEqual(1);
+ expect(timesRenderedInner).toEqual(2);
+ });
+
+ it('Should stop tracking inner observables referenced by a chained template as soon as the chained template output node is removed from the document', function() {
+ var innerObservable = ko.observable("some value");
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: "outer template output, [renderTemplate:innerTemplate]",
+ innerTemplate: "result = [js: childProp()]"
+ }));
+ testNode.innerHTML = "";
+ ko.applyBindings({ someProp: { childProp: innerObservable} }, testNode);
+
+ expect(innerObservable.getSubscriptionsCount()).toEqual(1);
+ ko.removeNode(document.getElementById('innerTemplateOutput'));
+ expect(innerObservable.getSubscriptionsCount()).toEqual(0);
+ });
+
+ it('Should handle data-bind attributes from inside templates, regardless of element and attribute casing', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "" }));
+ ko.renderTemplate("someTemplate", null, null, testNode);
+ expect(testNode.childNodes[0].value).toEqual("Hi");
+ });
+
+ it('Should handle data-bind attributes that include newlines from inside templates', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "" }));
+ ko.renderTemplate("someTemplate", null, null, testNode);
+ expect(testNode.childNodes[0].value).toEqual("Hi");
+ });
+
+ it('Data binding syntax should be able to reference variables put into scope by the template engine', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "" }));
+ ko.renderTemplate("someTemplate", null, { templateRenderingVariablesInScope: { message: "hello"} }, testNode);
+ expect(testNode.childNodes[0].value).toEqual("hello");
+ });
+
+ it('Data binding syntax should be able to use $element in binding value', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "" }));
+ ko.renderTemplate("someTemplate", null, null, testNode);
+ expect(testNode.childNodes[0]).toContainText("DIV");
+ });
+
+ it('Data binding syntax should be able to use $context in binding value to refer to the context object', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "" }));
+ ko.renderTemplate("someTemplate", {}, null, testNode);
+ expect(testNode.childNodes[0]).toContainText("true");
+ });
+
+ it('Data binding syntax should defer evaluation of variables until the end of template rendering (so bindings can take independent subscriptions to them)', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ someTemplate: "[js: message = 'goodbye'; undefined; ]"
+ }));
+ ko.renderTemplate("someTemplate", null, { templateRenderingVariablesInScope: { message: "hello"} }, testNode);
+ expect(testNode.childNodes[0].value).toEqual("goodbye");
+ });
+
+ it('Data binding syntax should use the template\'s \'data\' object as the viewModel value (so \'this\' is set correctly when calling click handlers etc.)', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ someTemplate: ""
+ }));
+ var viewModel = {
+ didCallMyFunction : false,
+ someFunctionOnModel : function() { this.didCallMyFunction = true }
+ };
+ ko.renderTemplate("someTemplate", viewModel, null, testNode);
+ var buttonNode = testNode.childNodes[0];
+ expect(buttonNode.tagName).toEqual("BUTTON"); // Be sure we're clicking the right thing
+ buttonNode.click();
+ expect(viewModel.didCallMyFunction).toEqual(true);
+ });
+
+ it('Data binding syntax should permit nested templates, and only bind inner templates once', function() {
+ // Will verify that bindings are applied only once for both inline (rewritten) bindings,
+ // and external (non-rewritten) ones
+ var originalBindingProvider = ko.bindingProvider.instance;
+ ko.bindingProvider.instance = {
+ nodeHasBindings: function(node, bindingContext) {
+ return (node.tagName == 'EM') || originalBindingProvider.nodeHasBindings(node, bindingContext);
+ },
+ getBindings: function(node, bindingContext) {
+ if (node.tagName == 'EM')
+ return { text: ++model.numBindings };
+ return originalBindingProvider.getBindings(node, bindingContext);
+ }
+ };
+
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: "Outer ",
+ innerTemplate: "Inner via inline binding: "
+ + "Inner via external binding: "
+ }));
+ var model = { numBindings: 0 };
+ testNode.innerHTML = "";
+ ko.applyBindings(model, testNode);
+ expect(model.numBindings).toEqual(2);
+ expect(testNode.childNodes[0]).toContainHtml("outer
inner via inline binding: 2inner via external binding: 1
");
+
+ ko.bindingProvider.instance = originalBindingProvider;
+ });
+
+ it('Data binding syntax should support \'foreach\' option, whereby it renders for each item in an array but doesn\'t rerender everything if you push or splice', function () {
+ var myArray = new ko.observableArray([{ personName: "Bob" }, { personName: "Frank"}]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "
");
+ var originalBobNode = testNode.childNodes[0].childNodes[0];
+ var originalFrankNode = testNode.childNodes[0].childNodes[1];
+
+ myArray.push({ personName: "Steve" });
+ expect(testNode.childNodes[0]).toContainHtml("
the item is bob
the item is frank
the item is steve
");
+ expect(testNode.childNodes[0].childNodes[0]).toEqual(originalBobNode);
+ expect(testNode.childNodes[0].childNodes[1]).toEqual(originalFrankNode);
+ });
+
+ it('Data binding \'foreach\' option should apply bindings within the context of each item in the array', function () {
+ var myArray = new ko.observableArray([{ personName: "Bob" }, { personName: "Frank"}]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item is " }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("the item is bobthe item is frank");
+ });
+
+ it('Data binding \'foreach\' options should only bind each group of output nodes once', function() {
+ var initCalls = 0;
+ (ko.bindingHandlers).countInits = { init: function() { initCalls++ } };
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "" }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: [1,2,3] }, testNode);
+ expect(initCalls).toEqual(3); // 3 because there were 3 items in myCollection
+ });
+
+ it('Data binding \'foreach\' should handle templates in which the very first node has a binding', function() {
+ // Represents https://github.com/SteveSanderson/knockout/pull/440
+ // Previously, the rewriting (which introduces a comment node before the bound node) was interfering
+ // with the array-to-DOM-node mapping state tracking
+ ko.setTemplateEngine(new dummyTemplateEngine({ mytemplate: "" }));
+ testNode.innerHTML = "";
+
+ // Bind against initial array containing one entry. UI just shows "original"
+ var myArray = ko.observableArray(["original"]);
+ ko.applyBindings({ items: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("
original
");
+
+ // Now replace the entire array contents with one different entry.
+ // UI just shows "new" (previously with bug, showed "original" AND "new")
+ myArray(["new"]);
+ expect(testNode.childNodes[0]).toContainHtml("
new
");
+ });
+
+ it('Data binding \'foreach\' should handle chained templates in which the very first node has a binding', function() {
+ // See https://github.com/SteveSanderson/knockout/pull/440 and https://github.com/SteveSanderson/knockout/pull/144
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: "[renderTemplate:innerTemplate]x", // [renderTemplate:...] is special syntax supported by dummy template engine
+ innerTemplate: "inner "
+ }));
+ testNode.innerHTML = "";
+
+ // Bind against initial array containing one entry.
+ var myArray = ko.observableArray(["original"]);
+ ko.applyBindings({ items: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("
original
inner 123x");
+
+ // Now replace the entire array contents with one different entry.
+ myArray(["new"]);
+ expect(testNode.childNodes[0]).toContainHtml("
new
inner 123x");
+ });
+
+ it('Data binding \'foreach\' should handle templates in which the very first node has a binding but it does not reference any observables', function() {
+ // Represents https://github.com/SteveSanderson/knockout/issues/739
+ // Previously, the rewriting (which introduces a comment node before the bound node) was interfering
+ // with the array-to-DOM-node mapping state tracking
+ ko.setTemplateEngine(new dummyTemplateEngine({ mytemplate: "
");
+
+ // Modify the observable property and check that UI is updated
+ // Previously with the bug, it wasn't updated because the removal of the memo comment caused the array-to-DOM-node computed to be disposed
+ myItem.name("b");
+ expect(testNode.childNodes[0]).toContainHtml("
b
");
+ });
+
+ it('Data binding \'foreach\' option should apply bindings with an $index in the context', function () {
+ var myArray = new ko.observableArray([{ personName: "Bob" }, { personName: "Frank"}]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item # is " }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("the item # is 0the item # is 1");
+ });
+
+ it('Data binding \'foreach\' option should update bindings that reference an $index if the list changes', function () {
+ var myArray = new ko.observableArray([{ personName: "Bob" }, { personName: "Frank"}]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item is " }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("the item bobis 0the item frankis 1");
+
+ var frank = myArray.pop(); // remove frank
+ expect(testNode.childNodes[0]).toContainHtml("the item bobis 0");
+
+ myArray.unshift(frank); // put frank in the front
+ expect(testNode.childNodes[0]).toContainHtml("the item frankis 0the item bobis 1");
+
+ });
+
+ it('Data binding \'foreach\' option should accept array with "undefined" and "null" items', function () {
+ var myArray = new ko.observableArray([undefined, null]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item is " }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("the item is undefinedthe item is null");
+ });
+
+ it('Data binding \'foreach\' option should update DOM nodes when a dependency of their mapping function changes', function() {
+ var myObservable = new ko.observable("Steve");
+ var myArray = new ko.observableArray([{ personName: "Bob" }, { personName: myObservable }, { personName: "Another" }]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "
The item is [js: ko.utils.unwrapObservable(personName)]
");
+ expect(testNode.childNodes[0].childNodes[0]).toEqual(originalBobNode);
+
+ // Ensure we can still remove the corresponding nodes (even though they've changed), and that doing so causes the subscription to be disposed
+ expect(myObservable.getSubscriptionsCount()).toEqual(1);
+ myArray.splice(1, 1);
+ expect(testNode.childNodes[0]).toContainHtml("
the item is bob
the item is another
");
+ myObservable("Something else"); // Re-evaluating the observable causes the orphaned subscriptions to be disposed
+ expect(myObservable.getSubscriptionsCount()).toEqual(0);
+ });
+
+ it('Data binding \'foreach\' option should treat a null parameter as meaning \'no items\'', function() {
+ var myArray = new ko.observableArray(["A", "B"]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "hello" }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(testNode.childNodes[0].childNodes.length).toEqual(2);
+
+ // Now set the observable to null and check it's treated like an empty array
+ // (because how else should null be interpreted?)
+ myArray(null);
+ expect(testNode.childNodes[0].childNodes.length).toEqual(0);
+ });
+
+ it('Data binding \'foreach\' option should accept an \"as\" option to define an alias for the iteration variable', function() {
+ // Note: There are more detailed specs (e.g., covering nesting) associated with the "foreach" binding which
+ // uses this templating functionality internally.
+ var myArray = new ko.observableArray(["A", "B"]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "[js:myAliasedItem]" }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(testNode.childNodes[0]).toContainText("AB");
+ });
+
+ it('Data binding \'foreach\' option should stop tracking inner observables when the container node is removed', function() {
+ var innerObservable = ko.observable("some value");
+ var myArray = new ko.observableArray([{obsVal:innerObservable}, {obsVal:innerObservable}]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item is [js: ko.utils.unwrapObservable(obsVal)]" }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(innerObservable.getSubscriptionsCount()).toEqual(2);
+
+ ko.removeNode(testNode.childNodes[0]);
+ expect(innerObservable.getSubscriptionsCount()).toEqual(0);
+ });
+
+ it('Data binding \'foreach\' option should stop tracking inner observables related to each array item when that array item is removed', function() {
+ var innerObservable = ko.observable("some value");
+ var myArray = new ko.observableArray([{obsVal:innerObservable}, {obsVal:innerObservable}]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item is [js: ko.utils.unwrapObservable(obsVal)]" }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({ myCollection: myArray }, testNode);
+ expect(innerObservable.getSubscriptionsCount()).toEqual(2);
+
+ myArray.splice(1, 1);
+ expect(innerObservable.getSubscriptionsCount()).toEqual(1);
+ myArray([]);
+ expect(innerObservable.getSubscriptionsCount()).toEqual(0);
+ });
+
+ it('Data binding syntax should omit any items whose \'_destroy\' flag is set (unwrapping the flag if it is observable)', function() {
+ var myArray = new ko.observableArray([{ someProp: 1 }, { someProp: 2, _destroy: 'evals to true' }, { someProp : 3 }, { someProp: 4, _destroy: ko.observable(false) }]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "
");
+ });
+
+ it('Data binding syntax should include any items whose \'_destroy\' flag is set if you use includeDestroyed', function() {
+ var myArray = new ko.observableArray([{ someProp: 1 }, { someProp: 2, _destroy: 'evals to true' }, { someProp : 3 }]);
+ ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "
person alpha has additional property someadditionalvalue
person beta has additional property someadditionalvalue
");
+ });
+
+ it('If the template binding is updated, should dispose any template subscriptions previously associated with the element', function() {
+ var myObservable = ko.observable("some value"),
+ myModel = {
+ subModel: ko.observable({ myObservable: myObservable })
+ };
+ ko.setTemplateEngine(new dummyTemplateEngine({myTemplate: "The value is [js:myObservable()]"}));
+ testNode.innerHTML = "";
+ ko.applyBindings(myModel, testNode);
+
+ // Right now the template references myObservable, so there should be exactly one subscription on it
+ expect(testNode.childNodes[0]).toContainText("The value is some value");
+ expect(myObservable.getSubscriptionsCount()).toEqual(1);
+ var renderedNode1 = testNode.childNodes[0].childNodes[0];
+
+ // By changing the object for subModel, we force the data-bind value to be re-evaluated and the template to be re-rendered,
+ // setting up a new template subscription, so there have now existed two subscriptions on myObservable...
+ myModel.subModel({ myObservable: myObservable });
+ expect(testNode.childNodes[0].childNodes[0]).not.toEqual(renderedNode1);
+
+ // ...but, because the old subscription should have been disposed automatically, there should only be one left
+ expect(myObservable.getSubscriptionsCount()).toEqual(1);
+ });
+
+ it('Should be able to specify a template engine instance using data-bind syntax', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({ theTemplate: "Default output" })); // Not going to use this one
+ var alternativeTemplateEngine = new dummyTemplateEngine({ theTemplate: "Alternative output" });
+
+ testNode.innerHTML = "";
+ ko.applyBindings({ chosenEngine: alternativeTemplateEngine }, testNode);
+
+ expect(testNode.childNodes[0]).toContainText("Alternative output");
+ });
+
+ it('Should be able to bind $data to an alias using \'as\'', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ myTemplate: "ValueLiteral: [js:item.prop], ValueBound: "
+ }));
+ testNode.innerHTML = "";
+ ko.applyBindings({ someItem: { prop: 'Hello' } }, testNode);
+ expect(testNode.childNodes[0]).toContainText("ValueLiteral: Hello, ValueBound: Hello");
+ });
+
+ it('Data-bind syntax should expose parent binding context as $parent if binding with an explicit \"data\" value', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ myTemplate: "ValueLiteral: [js:$parent.parentProp], ValueBound: "
+ }));
+ testNode.innerHTML = "";
+ ko.applyBindings({ someItem: {}, parentProp: 'Hello' }, testNode);
+ expect(testNode.childNodes[0]).toContainText("ValueLiteral: Hello, ValueBound: Hello");
+ });
+
+ it('Data-bind syntax should expose all ancestor binding contexts as $parents', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: "",
+ middleTemplate: "",
+ innerTemplate: "(Data:[js:$data.val], Parent:[[js:$parents[0].val]], Grandparent:[[js:$parents[1].val]], Root:[js:$root.val], Depth:[js:$parents.length])"
+ }));
+ testNode.innerHTML = "";
+
+ ko.applyBindings({
+ val: "ROOT",
+ outerItem: {
+ val: "OUTER",
+ middleItem: {
+ val: "MIDDLE",
+ innerItem: { val: "INNER" }
+ }
+ }
+ }, testNode);
+ expect(testNode.childNodes[0].childNodes[0]).toContainText("(Data:INNER, Parent:MIDDLE, Grandparent:OUTER, Root:ROOT, Depth:3)");
+ });
+
+ it('Should not be allowed to rewrite templates that embed anonymous templates', function() {
+ // The reason is that your template engine's native control flow and variable evaluation logic is going to run first, independently
+ // of any KO-native control flow, so variables would get evaluated in the wrong context. Example:
+ //
+ //
+ // ${ somePropertyOfEachArrayItem } <-- This gets evaluated *before* the foreach binds, so it can't reference array entries
+ //
+ //
+ // It should be perfectly OK to fix this just by preventing anonymous templates within rewritten templates, because
+ // (1) The developer can always use their template engine's native control flow syntax instead of the KO-native ones - that will work
+ // (2) The developer can use KO's native templating instead, if they are keen on KO-native control flow or anonymous templates
+
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ myTemplate: "
Childprop: [js: childProp]
"
+ }));
+ testNode.innerHTML = "";
+
+ var didThrow = false;
+ try {
+ ko.applyBindings({ someData: { childProp: 'abc' } }, testNode);
+ } catch(ex) {
+ didThrow = true;
+ expect(ex.message).toEqual("This template engine does not support anonymous templates nested within its templates");
+ }
+ expect(didThrow).toEqual(true);
+ });
+
+ it('Should not be allowed to rewrite templates that embed control flow bindings', function() {
+ // Same reason as above
+ ko.utils.arrayForEach(['if', 'ifnot', 'with', 'foreach'], function(bindingName) {
+ ko.setTemplateEngine(new dummyTemplateEngine({ myTemplate: "
Hello
" }));
+ testNode.innerHTML = "";
+
+ var didThrow = false;
+ ko.utils.domData.clear(testNode);
+ try { ko.applyBindings({ someData: { childProp: 'abc' } }, testNode) }
+ catch (ex) {
+ didThrow = true;
+ expect(ex.message).toEqual("This template engine does not support the '" + bindingName + "' binding within its templates");
+ }
+ if (!didThrow)
+ throw new Error("Did not prevent use of " + bindingName);
+ });
+ });
+
+ it('Data binding syntax should permit nested templates using virtual containers (with arbitrary internal whitespace and newlines)', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ outerTemplate: "Outer ",
+ innerTemplate: "Inner via inline binding: "
+ }));
+ var model = { };
+ testNode.innerHTML = "";
+ ko.applyBindings(model, testNode);
+ expect(testNode.childNodes[0]).toContainHtml("outer inner via inline binding: sometext");
+ });
+
+ it('Should be able to render anonymous templates using virtual containers', function() {
+ ko.setTemplateEngine(new dummyTemplateEngine());
+ testNode.innerHTML = "Start Childprop: [js: childProp] End";
+ ko.applyBindings({ someData: { childProp: 'abc' } }, testNode);
+ expect(testNode).toContainHtml("start childprop: abcend");
+ });
+
+ it('Should be able to use anonymous templates that contain first-child comment nodes', function() {
+ // This represents issue https://github.com/SteveSanderson/knockout/issues/188
+ // (IE < 9 strips out leading comment nodes when you use .innerHTML)
+ ko.setTemplateEngine(new dummyTemplateEngine({}));
+ testNode.innerHTML = "start
');
+ });
+
+ it('Should allow anonymous templates output to include top-level virtual elements, and will bind their virtual children only once', function() {
+ delete (ko.bindingHandlers).nonexistentHandler;
+ var initCalls = 0;
+ (ko.bindingHandlers).countInits = { init: function () { initCalls++ } };
+ testNode.innerHTML = "
";
+ ko.applyBindings(null, testNode);
+ expect(initCalls).toEqual(1);
+ });
+
+ it('Should not throw errors if trying to apply text to a non-rendered node', function() {
+ // Represents https://github.com/SteveSanderson/knockout/issues/660
+ // A can't go directly into a
, so modern browsers will silently strip it. We need to verify this doesn't
+ // throw errors during unmemoization (when unmemoizing, it will try to apply the text to the following text node
+ // instead of the node you intended to bind to).
+ // Note that IE < 9 won't strip the
; instead it has much stranger behaviors regarding unexpected DOM structures.
+ // It just happens not to give an error in this particular case, though it would throw errors in many other cases
+ // of malformed template DOM.
+ ko.setTemplateEngine(new dummyTemplateEngine({
+ myTemplate: "