Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement hyphens in data-bind attributes and optional '=' #63

Merged
merged 3 commits into from
Dec 16, 2011
Merged

Implement hyphens in data-bind attributes and optional '=' #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
005b335
Allow hyphens in data-bind params
tristanls Dec 16, 2011
0657fd7
Remove commented regex.
tristanls Dec 16, 2011
200a5fc
Implemented using optional '=' between attribute value in data-bind; …
tristanls Dec 16, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions agility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,14 +423,14 @@
return this;
}, // render

// Parse data-bind string of the type '[attribute] variable[, attribute variable ]...'
// Parse data-bind string of the type '[attribute][=] variable[, attribute[=] variable ]...'
// If the variable is not an attribute, it must be first in the list,
// all following pairs in the list are assumed to be attributes
// Returns { key:'model key', attr: [ {attr : 'attribute', attrVar : 'variable' }... ] }
_parseBindStr: function(str){
var obj = {key:null, attr:[]},
pairs = str.split(','),
regex = /(\w+)(?:\s+(\w+))?/,
regex = /([a-zA-Z0-9_\-]+)(?:[\s=]+([a-zA-Z0-9_\-]+))?/,
matched;

if (pairs.length > 0) {
Expand Down
40 changes: 20 additions & 20 deletions test/public/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,18 +62,18 @@
test("Two arguments (model object, view string) with multiple attribute bindings", function(){
var obj = $$({
first: 'Joe',
last: 'Doe',
'la-st': 'Doe',
name: 'Joe Doe',
firstColor: 'Red',
lastColor: 'Blue'
}, '<div><span data-bind="first, name name, firstColor firstColor"/>' +
'<span data-bind="last, name name, lastColor lastColor"/></div>');
'last-color': 'Blue'
}, '<div><span data-bind="first, name=name, firstColor=firstColor"/>' +
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it also work with arbitrary spaces around the equal sign, like:

  data-bind="first, name     = name, firstColor = firstColor"

?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK just tested this and it does work :)

'<span data-bind="la-st, name name, last-color last-color"/></div>');
validateObject( obj );
equals( obj.view.$().text(), 'JoeDoe', 'format as expected');
equals( obj.view.$( 'span' ).first().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).first().attr( 'firstColor' ), 'Red', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'lastColor' ), 'Blue', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'last-color' ), 'Blue', 'format as expected');
});

test("Three arguments (model object, view string, controller object)", function(){
Expand All @@ -85,19 +85,19 @@
test("Three arguments (model object, view string, controller object) with multiple attribute bindings", function(){
var obj = $$({
first: 'Joe',
last: 'Doe',
'la-st': 'Doe',
name: 'Joe Doe',
firstColor: 'Red',
lastColor: 'Blue'
}, '<div><span data-bind="first, name name, firstColor firstColor"/>' +
'<span data-bind="last, name name, lastColor lastColor"/></div>',
'last-color': 'Blue'
}, '<div><span data-bind="first, name=name, firstColor=firstColor"/>' +
'<span data-bind="la-st, name name, last-color last-color"/></div>',
{});
validateObject( obj );
equals( obj.view.$().text(), 'JoeDoe', 'format as expected');
equals( obj.view.$( 'span' ).first().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).first().attr( 'firstColor' ), 'Red', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'lastColor' ), 'Blue', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'last-color' ), 'Blue', 'format as expected');
});

test("Three arguments (model object, view object, controller object)", function(){
Expand All @@ -111,12 +111,12 @@
test("Three arguments (model object, view object, controller object) with multiple attribute bindings", function(){
var obj = $$({
first: 'Joe',
last: 'Doe',
'la-st': 'Doe',
name: 'Joe Doe',
firstColor: 'Red',
lastColor: 'Blue'
}, {format:'<div><span data-bind="first, name name, firstColor firstColor"/>' +
'<span data-bind="last, name name, lastColor lastColor"/></div>',
'last-color': 'Blue'
}, {format:'<div><span data-bind="first, name=name, firstColor=firstColor"/>' +
'<span data-bind="la-st, name name, last-color last-color"/></div>',
style:'& {float:right; display:none;}'},
{});
$$.document.append(obj); // necessary for IE & Chrome
Expand All @@ -125,7 +125,7 @@
equals( obj.view.$( 'span' ).first().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).first().attr( 'firstColor' ), 'Red', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'lastColor' ), 'Blue', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'last-color' ), 'Blue', 'format as expected');
equals( obj.view.$().css('float'), 'right', 'style as expected');
});

Expand Down Expand Up @@ -153,14 +153,14 @@
var obj = $$({
model: {
first: 'Joe',
last: 'Doe',
'la-st': 'Doe',
name: 'Joe Doe',
firstColor: 'Red',
lastColor: 'Blue'
'last-color': 'Blue'
},
view: {
format: '<div><span data-bind="first, name name, firstColor firstColor"/>' +
'<span data-bind="last, name name, lastColor lastColor"/></div>',
format: '<div><span data-bind="first, name=name, firstColor=firstColor"/>' +
'<span data-bind="la-st, name name, last-color last-color"/></div>',
style:'& {float:right; display:none;}'
},
controller: {},
Expand All @@ -173,7 +173,7 @@
equals( obj.view.$( 'span' ).first().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).first().attr( 'firstColor' ), 'Red', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'name' ), 'Joe Doe', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'lastColor' ), 'Blue', 'format as expected');
equals( obj.view.$( 'span' ).last().attr( 'last-color' ), 'Blue', 'format as expected');
equals( obj.view.$().css('float'), 'right', 'style as expected');
});

Expand Down