read values from range/number inputs as numbers - fixes #436

pull/438/head
Rich-Harris 8 years ago
parent a3ecb67977
commit 605040ddb7

@ -144,6 +144,11 @@ function getBindingValue ( generator, local, node, attribute, isMultipleSelect,
return `${local.name}.__value`; return `${local.name}.__value`;
} }
// <input type='range|number' bind:value>
if ( type === 'range' || type === 'number' ) {
return `+${local.name}.${attribute.name}`;
}
// everything else // everything else
return `${local.name}.${attribute.name}`; return `${local.name}.${attribute.name}`;
} }

@ -0,0 +1,33 @@
export default {
data: {
count: 42
},
html: `
<input type='number'>
<p>number 42</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
assert.equal( input.value, '42' );
const event = new window.Event( 'input' );
input.value = '43';
input.dispatchEvent( event );
assert.equal( component.get( 'count' ), 43 );
assert.htmlEqual( target.innerHTML, `
<input type='number'>
<p>number 43</p>
` );
component.set({ count: 44 });
assert.equal( input.value, '44' );
assert.htmlEqual( target.innerHTML, `
<input type='number'>
<p>number 44</p>
` );
}
};

@ -0,0 +1,2 @@
<input type='number' bind:value='count'>
<p>{{typeof count}} {{count}}</p>

@ -0,0 +1,33 @@
export default {
data: {
count: 42
},
html: `
<input type='range'>
<p>number 42</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
assert.equal( input.value, '42' );
const event = new window.Event( 'input' );
input.value = '43';
input.dispatchEvent( event );
assert.equal( component.get( 'count' ), 43 );
assert.htmlEqual( target.innerHTML, `
<input type='range'>
<p>number 43</p>
` );
component.set({ count: 44 });
assert.equal( input.value, '44' );
assert.htmlEqual( target.innerHTML, `
<input type='range'>
<p>number 44</p>
` );
}
};

@ -0,0 +1,2 @@
<input type='range' bind:value='count'>
<p>{{typeof count}} {{count}}</p>
Loading…
Cancel
Save