Goodbye
"; ko.applyBindings({ sometext: 'hello' }, testNode); expect(testNode).toContainHtml('replaced
replaced
'); }); it('Goodbye
"; ko.applyBindings({ sometext: 'hello' }, testNode); expect(testNode).toContainHtml('replaced
replaced
'); }); it('', function() { document.createElement('template'); // For old IE testNode.innerHTML = "Hello
testGoodbye
"; ko.applyBindings({ sometext: 'hello' }, testNode); expect(testNode).toContainHtml('replaced
testreplaced
'); }); }); }); knockout-3.4.2/spec/bindingDependencyBehaviors.js 0000664 0000000 0000000 00000060520 13057340314 0022124 0 ustar 00root root 0000000 0000000 describe('Binding dependencies', function() { beforeEach(jasmine.prepareTestNode); it('If the binding handler depends on an observable, invokes the init handler once and the update handler whenever a new value is available', function () { var observable = new ko.observable(); var initPassedValues = [], updatePassedValues = []; ko.bindingHandlers.test = { init: function (element, valueAccessor) { initPassedValues.push(valueAccessor()()); }, update: function (element, valueAccessor) { updatePassedValues.push(valueAccessor()()); } }; testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(initPassedValues.length).toEqual(1); expect(updatePassedValues.length).toEqual(1); expect(initPassedValues[0]).toBeUndefined(); expect(updatePassedValues[0]).toBeUndefined(); observable("A"); expect(initPassedValues.length).toEqual(1); expect(updatePassedValues.length).toEqual(2); expect(updatePassedValues[1]).toEqual("A"); }); it('If the associated DOM element was removed by KO, handler subscriptions are disposed immediately', function () { var observable = new ko.observable("A"); ko.bindingHandlers.anyHandler = { update: function (element, valueAccessor) { valueAccessor(); } }; testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(observable.getSubscriptionsCount()).toEqual(1); ko.removeNode(testNode); expect(observable.getSubscriptionsCount()).toEqual(0); }); it('If the associated DOM element was removed independently of KO, handler subscriptions are disposed on the next evaluation', function () { var observable = new ko.observable("A"); ko.bindingHandlers.anyHandler = { update: function (element, valueAccessor) { valueAccessor(); } }; testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(observable.getSubscriptionsCount()).toEqual(1); testNode.parentNode.removeChild(testNode); observable("B"); // Force re-evaluation expect(observable.getSubscriptionsCount()).toEqual(0); }); it('If the binding attribute involves an observable, re-invokes the bindings if the observable notifies a change', function () { var observable = new ko.observable({ message: "hello" }); var passedValues = []; ko.bindingHandlers.test = { update: function (element, valueAccessor) { passedValues.push(valueAccessor()); } }; testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(passedValues.length).toEqual(1); expect(passedValues[0]).toEqual("hello"); observable({ message: "goodbye" }); expect(passedValues.length).toEqual(2); expect(passedValues[1]).toEqual("goodbye"); }); it('Should not reinvoke init for notifications triggered during first evaluation', function () { var observable = ko.observable('A'); var initCalls = 0; ko.bindingHandlers.test = { init: function (element, valueAccessor) { initCalls++; var value = valueAccessor(); // Read the observable (to set up a dependency on it), and then also write to it (to trigger re-eval of bindings) // This logic probably wouldn't be in init but might be indirectly invoked by init value(); value('B'); } }; testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(initCalls).toEqual(1); }); it('Should not run update before init, even if an associated observable is updated by a different binding before init', function() { // Represents the "theoretical issue" posed by Ryan in comments on https://github.com/SteveSanderson/knockout/pull/193 var observable = ko.observable('A'), hasInittedSecondBinding = false, hasUpdatedSecondBinding = false; ko.bindingHandlers.test1 = { init: function(element, valueAccessor) { // Read the observable (to set up a dependency on it), and then also write to it (to trigger re-eval of bindings) // This logic probably wouldn't be in init but might be indirectly invoked by init var value = valueAccessor(); value(); value('B'); } } ko.bindingHandlers.test2 = { init: function() { hasInittedSecondBinding = true; }, update: function() { if (!hasInittedSecondBinding) throw new Error("Called 'update' before 'init'"); hasUpdatedSecondBinding = true; } } testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(hasUpdatedSecondBinding).toEqual(true); }); it('Should be able to get all updates to observables in both init and update', function() { var lastBoundValueInit, lastBoundValueUpdate; ko.bindingHandlers.testInit = { init: function(element, valueAccessor) { ko.dependentObservable(function() { lastBoundValueInit = ko.utils.unwrapObservable(valueAccessor()); }); } }; ko.bindingHandlers.testUpdate = { update: function(element, valueAccessor) { lastBoundValueUpdate = ko.utils.unwrapObservable(valueAccessor()); } }; testNode.innerHTML = ""; var vm = ko.observable({ myProp: ko.observable("initial value") }); ko.applyBindings(vm, testNode); expect(lastBoundValueInit).toEqual("initial value"); expect(lastBoundValueUpdate).toEqual("initial value"); // update value of observable vm().myProp("second value"); expect(lastBoundValueInit).toEqual("second value"); expect(lastBoundValueUpdate).toEqual("second value"); // update value of observable to another observable vm().myProp(ko.observable("third value")); expect(lastBoundValueInit).toEqual("third value"); expect(lastBoundValueUpdate).toEqual("third value"); // update view model with brand-new property vm({ myProp: function() {return "fourth value"; }}); expect(lastBoundValueInit).toEqual("fourth value"); expect(lastBoundValueUpdate).toEqual("fourth value"); }); it('Should not update sibling bindings if a binding is updated', function() { var countUpdates = 0, observable = ko.observable(1); ko.bindingHandlers.countingHandler = { update: function() { countUpdates++; } } ko.bindingHandlers.unwrappingHandler = { update: function(element, valueAccessor) { valueAccessor(); } } testNode.innerHTML = ""; ko.applyBindings({ myObservable: observable }, testNode); expect(countUpdates).toEqual(1); observable(3); expect(countUpdates).toEqual(1); }); it('Should not subscribe to observables accessed in init function', function() { var observable = ko.observable('A'); ko.bindingHandlers.test = { init: function(element, valueAccessor) { var value = valueAccessor(); value(); } } testNode.innerHTML = "the value:
' }); testNode.innerHTML = 'the observable:
', viewModel: function(params) { this.receivedobservable = params.suppliedobservable; expect(this.receivedobservable.subprop).toBe('subprop'); this.dispose = function() { this.wasDisposed = true; }; // The $raw value for this param is a computed giving the observable instance expect(ko.isComputed(params.$raw.suppliedobservable)).toBe(true); expect(params.$raw.suppliedobservable()).toBe(params.suppliedobservable); } }); // See we can supply an observable instance, which is received with no wrapper around it var myobservable = ko.observable(1); myobservable.subprop = 'subprop'; testNode.innerHTML = 'the string reversed:
', viewModel: function(params) { constructorCallCount++; this.receivedobservable = params.suppliedobservable; this.dispose = function() { this.wasDisposed = true; }; // See we didn't get the original observable instance. Instead we got a read-only computed property. expect(this.receivedobservable).not.toBe(rootViewModel.myobservable); expect(ko.isComputed(this.receivedobservable)).toBe(true); expect(ko.isWritableObservable(this.receivedobservable)).toBe(false); // The $raw value for this param is a computed property whose value is raw result // of evaluating the binding value. Since the raw result in this case is itself not // observable, it's the same value as the regular (non-$raw) supplied parameter. expect(ko.isComputed(params.$raw.suppliedobservable)).toBe(true); expect(params.$raw.suppliedobservable()).toBe(params.suppliedobservable()); } }); // Bind, using an expression that evaluates the observable during binding testNode.innerHTML = 'Some text
The end
' }); testConfigObject({ template: { require: 'some/module/path' } }, function(definition) { expect(definition.template.length).toBe(2); expect(definition.template[0].tagName).toBe('DIV'); expect(definition.template[0]).toContainText('Hello world'); expect(definition.template[1].tagName).toBe('P'); expect(definition.template[1]).toContainText('The end'); }); }); // In the future we might also support arbitrary objects acting as component templates, // possibly with a config syntax like "template: { custom: arbitraryObject }", which // would be passed through (without normalisation) to a custom template engine. }); describe('Viewmodels', function() { it('Can be configured as a createViewModel function', function() { var createViewModel = function() { }; testConfigObject({ viewModel: { createViewModel: createViewModel } }, function(definition) { expect(definition.createViewModel).toBe(createViewModel); }); }); it('Can be configured as a constructor function', function() { var myConstructor = function(params) { this.receivedValue = params.suppliedValue; }; testConfigObject({ viewModel: myConstructor }, function(definition) { var viewModel = definition.createViewModel({ suppliedValue: 123 }, null /* componentInfo */); expect(viewModel.receivedValue).toBe(123); }); }); it('Can be configured as an object instance', function() { var myInstance = {}; testConfigObject({ viewModel: { instance: myInstance } }, function(definition) { var viewModel = definition.createViewModel(null /* params */, null /* componentInfo */); expect(viewModel).toBe(myInstance); }); }); it('Can be configured as an AMD module that supplies a createViewModel factory', function() { var createViewModel = function() { }; mockAmdEnvironment(this, { 'some/module/path': { createViewModel: createViewModel } }); testConfigObject({ viewModel: { require: 'some/module/path' } }, function(definition) { expect(definition.createViewModel).toBe(createViewModel); }); }); it('Can be configured as an AMD module that is a constructor function', function() { var myConstructor = function(params) { this.receivedValue = params.suppliedValue; }; mockAmdEnvironment(this, { 'some/module/path': myConstructor }); testConfigObject({ viewModel: { require: 'some/module/path' } }, function(definition) { var viewModel = definition.createViewModel({ suppliedValue: 234 }, null /* componentInfo */); expect(viewModel.receivedValue).toBe(234); }); }); it('Can be configured as an AMD module that supplies a viewmodel configuration', function() { var myConstructor = function(params) { this.receivedValue = params.suppliedValue; }; mockAmdEnvironment(this, { 'some/module/path': { viewModel: myConstructor } }); testConfigObject({ viewModel: { require: 'some/module/path' } }, function(definition) { var viewModel = definition.createViewModel({ suppliedValue: 345 }, null /* componentInfo */); expect(viewModel.receivedValue).toBe(345); }); }); }); describe('Combined viewmodel/templates', function() { it('Can be configured as an AMD module', function() { var moduleObject = { // The module can have any values that are valid as the input to the whole resolution process template: [], viewModel: function(params) { this.receivedValue = params.suppliedValue; } }; mockAmdEnvironment(this, { 'some/module/path': moduleObject }); testConfigObject({ require: 'some/module/path' }, function(definition) { expect(definition.template).toBe(moduleObject.template); var viewModel = definition.createViewModel({ suppliedValue: 567 }, null /* componentInfo */); expect(viewModel.receivedValue).toBe(567); }); }); }); }); function testConfigObject(configObject, assertionCallback) { ko.components.unregister(testComponentName); ko.components.register(testComponentName, configObject); var didComplete = false; ko.components.get(testComponentName, function(definition) { assertionCallback(definition); didComplete = true; }); waitsFor(function() { return didComplete; }, 1000); } function testTemplateFromElement(wrapperMarkup, elementId, extraAssertsCallback) { var testElem = document.createElement('div'); document.body.appendChild(testElem); // Needed so it can be found by ID, and because IE<=8 won't parse its .innerHTML properly otherwise // The 'ignored' prefix is needed for IE <= 8, which silently strips any