Ejemplo n.º 1
0
	test('<input checkbox> two-way - DOM - with truthy and falsy values binds to checkbox (#1700)', function() {
		var data = new SimpleMap({
			completed: 1
		}),
		frag = stache('<input type="checkbox" el:checked:bind="completed"/>')(data);

		domMutateNode.appendChild.call(this.fixture, frag);

		var input = this.fixture.getElementsByTagName('input')[0];
		equal(input.checked, true, 'checkbox value bound (via attr check)');
		data.attr('completed', 0);
		stop();

		testHelpers.afterMutation(function() {
			start();
			equal(input.checked, false, 'checkbox value bound (via attr check)');
		});
	});
Ejemplo n.º 2
0
	test("<input text> two-way - DOM - input text (#1700)", function() {

		var template = stache("<input value:bind='age'/>");

		var map = new SimpleMap();

		var frag = template(map);

		var ta = this.fixture;
		ta.appendChild(frag);

		var input = ta.getElementsByTagName("input")[0];
		equal(input.value, "", "input value set correctly if key does not exist in map");

		map.attr("age", "30");

		stop();
		testHelpers.afterMutation(function() {
			start();
			equal(input.value, "30", "input value set correctly");

			map.attr("age", "31");

			stop();
			testHelpers.afterMutation(function() {
				start();
				equal(input.value, "31", "input value update correctly");

				input.value = "32";

				domEvents.dispatch(input, "change");

				stop();
				testHelpers.afterMutation(function() {
					start();
					equal(map.attr("age"), "32", "updated from input");
				});
			});
		});
	});
Ejemplo n.º 3
0
	test("<input checkbox> checkboxes with checked:bind bind properly (#628)", function() {
		var data = new SimpleMap({
			completed: true
		}),
		frag = stache('<input type="checkbox" checked:bind="completed"/>')(data);

		domMutateNode.appendChild.call(this.fixture, frag);

		var input = this.fixture.getElementsByTagName('input')[0];
		equal(input.checked, data.get('completed'), 'checkbox value bound (via attr check)');

		data.attr('completed', false);
		equal(input.checked, data.get('completed'), 'checkbox value bound (via attr uncheck)');
		input.checked = true;
		domEvents.dispatch(input, 'change');
		equal(input.checked, true, 'checkbox value bound (via check)');
		equal(data.get('completed'), true, 'checkbox value bound (via check)');
		input.checked = false;
		domEvents.dispatch(input, 'change');
		equal(input.checked, false, 'checkbox value bound (via uncheck)');
		equal(data.get('completed'), false, 'checkbox value bound (via uncheck)');
	});
Ejemplo n.º 4
0
		testHelpers.afterMutation(function() {
			start();
			equal(input.value, "30", "input value set correctly");

			map.attr("age", "31");

			stop();
			testHelpers.afterMutation(function() {
				start();
				equal(input.value, "31", "input value update correctly");

				input.value = "32";

				domEvents.dispatch(input, "change");

				stop();
				testHelpers.afterMutation(function() {
					start();
					equal(map.attr("age"), "32", "updated from input");
				});
			});
		});
Ejemplo n.º 5
0
	testIfRealDocument('<select> - previously non-existing select value gets selected from a list when it is added (#1762)', function() {
		// this breaks with VDOM can-stache-bindings#258 because of selectedIndex
		var template = stache('<select el:value:bind="{person}">' +
			'<option></option>' +
			'{{#each people}}<option value="{{.}}">{{.}}</option>{{/each}}' +
			'</select>' +
			'<input type="text" size="5" el:value:bind="person">'
		);

		var people = new DefineList([
			"Justin",
			"Zed",
			"Tom",
			"Paula"
		]);

		var vm = new SimpleMap({
			person: 'Brian',
			people: people
		});

		stop();
		vm.on('person', function(ev, newVal, oldVal) {
			ok(false, 'person attribute should not change');
		});

		var frag = template(vm);

		equal(vm.attr('person'), 'Brian', 'Person is still set');

		testHelpers.afterMutation(function() {
			people.push('Brian');
			testHelpers.afterMutation(function() {
				var select = frag.firstChild;
				ok(select.lastChild.selected, 'New child should be selected');
				start();
			});
		});
	});
Ejemplo n.º 6
0
	QUnit.test("vm:prop:to/:from/:bind work (#280)", function() {
		var vm1 = new SimpleMap({ value: 'vm1' });
		var vm2 = new SimpleMap({ value: 'vm2' });
		var vm3 = new SimpleMap({ value: 'vm3' });

		MockComponent.extend({
			tag: "comp-1",
			viewModel: vm1
		});
		MockComponent.extend({
			tag: "comp-2",
			viewModel: vm2
		});
		MockComponent.extend({
			tag: "comp-3",
			viewModel: vm3
		});

		var template = stache(
			"<comp-1 vm:value:to='scope1'/>" +
				"<comp-2 vm:value:from='scope2'/>" +
				"<comp-3 vm:value:bind='scope3'/>"
		);

		var scope = new SimpleMap({
			scope1: 'scope1',
			scope2: 'scope2',
			scope3: 'scope3'
		});
		template(scope);

		// vm:value:to
		equal(scope.attr('scope1'), 'vm1', 'vm:value:to - scope value set from vm');

		vm1.attr('value', 'vm4');
		equal(scope.attr('scope1'), 'vm4', 'vm:value:to - scope updated when vm changes');

		scope.attr('scope1', 'scope4');
		equal(vm1.attr('value'), 'vm4', 'vm:value:to - vm not updated when scope changes');

		// vm:value:from
		equal(vm2.attr('value'), 'scope2', 'vm:value:from - vm value set from scope');

		scope.attr('scope2', 'scope5');
		equal(vm2.attr('value'), 'scope5', 'vm:value:from - vm updated when scope changes');

		vm2.attr('value', 'vm5');
		equal(scope.attr('scope2'), 'scope5', 'vm:value:from - scope not updated when vm changes');

		// vm:value:bind
		equal(vm3.attr('value'), 'scope3', 'vm:value:bind - vm value set from scope');

		scope.attr('scope3', 'scope6');
		equal(vm3.attr('value'), 'scope6', 'vm:value:bind - vm updated when scope changes');

		vm3.attr('value', 'vm6');
		equal(scope.attr('scope3'), 'vm6', 'vm:value:bind - scope updated when vm changes');
	});
Ejemplo n.º 7
0
	QUnit.test('event bindings should be removed when the bound element is', function (assert) {
		var done = assert.async();
		var template = stache('<div>{{#if isShowing}}<span foo:from="bar"></span><hr/>{{/if}}</div>');
		var viewModel = new SimpleMap({
			isShowing: true,
			bar: 'baz'
		});
		var isTarget = function (target) {
			return target.nodeName === 'SPAN';
		};

		var attributeChangeCount = 0;
		var isAttributeChangeTracked = false;
		var onNodeAttributeChange = domMutate.onNodeAttributeChange;
		domMutate.onNodeAttributeChange = function (node) {
			if (!isTarget(node)) {
				return onNodeAttributeChange.apply(null, arguments);
			}

			attributeChangeCount++;
			isAttributeChangeTracked = true;
			var disposal = onNodeAttributeChange.apply(null, arguments);
			return function () {
				attributeChangeCount--;
				return disposal();
			};
		};

		var removalCount = 0;
		var isRemovalTracked = false;
		var onNodeRemoval = domMutate.onNodeRemoval;
		domMutate.onNodeRemoval = function (node) {
			if (!isTarget(node)) {
				return onNodeRemoval.apply(null, arguments);
			}

			removalCount++;
			isRemovalTracked = true;
			var disposal = onNodeRemoval.apply(null, arguments);
			return function () {
				removalCount--;
				return disposal();
			};
		};

		var fragment = template(viewModel);
		domMutateNode.appendChild.call(this.fixture, fragment);

		// We use the also effected hr so we
		// can test the span handlers in isolation.
		var hr = this.fixture.firstChild.lastChild;
		var removalDisposal = domMutate.onNodeRemoval(hr, function () {
			removalDisposal();

			domMutate.onNodeAttributeChange = onNodeAttributeChange;
			assert.ok(isAttributeChangeTracked, 'Attribute foo:from="bar" should be tracked');
			assert.equal(attributeChangeCount, 0, 'all attribute listeners should be disposed');

			domMutate.onNodeRemoval = onNodeRemoval;
			assert.ok(isRemovalTracked, 'Element span should be tracked');
			assert.equal(removalCount, 0, 'all removal listeners should be disposed');

			done();
		});
		viewModel.attr('isShowing', false);
	});
			function(){
				equal(vm.swap, 3, "swap - updated binding key");
				map.attr("nextPage",4);
				equal(vm.swap, 4, "swap - updated binding");
			}
			function(){
				equal(vm.next, 3, "re-initialized with binding");
				equal(vm.swap, true, "swap - updated binidng");
				//equal(vm.get("checked"), "", "attr - has binding set again");
				map.attr("swapName", "nextPage");
			},
Ejemplo n.º 10
0
				testHelpers.afterMutation(function() {
					start();
					equal(map.attr("age"), "32", "updated from input");
				});
Ejemplo n.º 11
0
		testHelpers.afterMutation(function(){
			equal(select.selectedIndex, 0, "selectedIndex is 0 because no value exists on the map");
			equal(map.attr("value"), "One", "The map's value property is set to the select's value");
			start();
		});