Skip to content

Commit

Permalink
updating tests and code for zepto; included zepto-data.js, a new requ…
Browse files Browse the repository at this point in the history
…irement for selects; #58
  • Loading branch information
delambo committed Jan 24, 2013
1 parent 9db7152 commit e2f1524
Show file tree
Hide file tree
Showing 6 changed files with 1,044 additions and 37 deletions.
10 changes: 6 additions & 4 deletions backbone.stickit.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,8 @@

var isContenteditable = function($el) { return $el.is('[contenteditable="true"]'); };

var getSelectedOption = function($select) { return $select.find('option').not(function(){ return !this.selected; }); };

// Given a function, string (view function reference), or a boolean
// value, returns the truthy result. Any other types evaluate as false.
var evaluateBoolean = function(view, reference) {
Expand Down Expand Up @@ -252,11 +254,11 @@
}
} else if (isSelect($el)) {
if ($el.prop('multiple')) {
val = $el.find('option').not(function(){ return !this.selected }).map(function() {
val = $(getSelectedOption($el).map(function() {
return $(this).data('stickit_bind_val');
}).get();
})).get();
} else {
val = $el.find('option').not(function(){ return !this.selected }).data('stickit_bind_val');
val = getSelectedOption($el).data('stickit_bind_val');
}
}
else val = $el.val();
Expand Down Expand Up @@ -357,7 +359,7 @@
if (obj != null) {
option.text(evaluatePath(obj, selectConfig.labelPath || "label"));
optionVal = evaluatePath(obj, selectConfig.valuePath || "value");
} else if ($el.find('option').length && $el.find('option:eq(0)').data('stickit_bind_val') == null) return false;
} else if ($el.find('option').length && $el.find('option').eq(0).data('stickit_bind_val') == null) return false;

// Save the option value so that we can reference it later.
option.data('stickit_bind_val', optionVal);
Expand Down
62 changes: 31 additions & 31 deletions test/bindData.js
Original file line number Diff line number Diff line change
Expand Up @@ -517,12 +517,12 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test8 option:selected').data('stickit_bind_val'), 'fountain');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'fountain');

model.set('water', 'evian');
equal(view.$('#test8 option:selected').data('stickit_bind_val'), 'evian');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'evian');

view.$('#test8 option:eq(2)').prop('selected', true).trigger('change');
view.$('#test8 option').eq(2).prop('selected', true).trigger('change');
equal(model.get('water'), 'dasina');
});

Expand All @@ -545,12 +545,12 @@ $(document).ready(function() {
};
$('#qunit-fixture').html(view.render().el);

equal(view.$('#test8 option:selected').data('stickit_bind_val').id, 1);
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val').id, 1);

model.set('water', {id:2, name:'evian'});
equal(view.$('#test8 option:selected').data('stickit_bind_val').id, 2);
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val').id, 2);

view.$('#test8 option:eq(3)').prop('selected', true).trigger('change');
view.$('#test8 option').eq(3).prop('selected', true).trigger('change');
equal(model.get('water').id, 3);
});

Expand All @@ -574,12 +574,12 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test8 option:selected').data('stickit_bind_val'), null);
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), null);

model.set('water', {id:2, name:'evian'});
equal(view.$('#test8 option:selected').data('stickit_bind_val').id, 2);
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val').id, 2);

view.$('#test8 option:eq(0)').prop('selected', true).trigger('change');
view.$('#test8 option').eq(0).prop('selected', true).trigger('change');
equal(model.get('water'), null);
});

Expand All @@ -603,11 +603,11 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test8 option:selected').data('stickit_bind_val'), 'session');
equal(view.$('#test8 option:eq(0)').data('stickit_bind_val'), '');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'session');
equal(view.$('#test8 option').eq(0).data('stickit_bind_val'), '');

model.set('water', '');
equal(view.$('#test8 option:selected').data('stickit_bind_val'), '');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), '');
});

test('bindings:selectOptions (default labelPath/valuePath)', function() {
Expand All @@ -628,10 +628,10 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test8 option:selected').data('stickit_bind_val'), 'evian');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'evian');

model.set('water', 'fountain');
equal(view.$('#test8 option:selected').data('stickit_bind_val'), 'fountain');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'fountain');
});

test('bindings:selectOptions (multi-select without valuePath)', function() {
Expand All @@ -653,16 +653,16 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test16 option:selected:eq(0)').data('stickit_bind_val').name, 'fountain');
equal(view.$('#test16 option:selected:eq(1)').data('stickit_bind_val').name, 'dasina');
equal(getSelectedOption(view.$('#test16')).eq(0).data('stickit_bind_val').name, 'fountain');
equal(getSelectedOption(view.$('#test16')).eq(1).data('stickit_bind_val').name, 'dasina');

var field = _.clone(model.get('water'));
field.push({id:2,name:'evian'});

model.set({'water':field});
equal(view.$('#test16 option:selected:eq(1)').data('stickit_bind_val').name, 'evian');
equal(getSelectedOption(view.$('#test16')).eq(1).data('stickit_bind_val').name, 'evian');

view.$('#test16 option:eq(3)').prop('selected', true).trigger('change');
view.$('#test16 option').eq(3).prop('selected', true).trigger('change');

equal(model.get('water').length, 4);

Expand All @@ -688,16 +688,16 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test16 option:selected:eq(0)').data('stickit_bind_val'), 1);
equal(view.$('#test16 option:selected:eq(1)').data('stickit_bind_val'), 3);
equal(getSelectedOption(view.$('#test16')).eq(0).data('stickit_bind_val'), 1);
equal(getSelectedOption(view.$('#test16')).eq(1).data('stickit_bind_val'), 3);

var field = _.clone(model.get('water'));
field.push(2);

model.set({'water':field});
equal(view.$('#test16 option:selected:eq(1)').data('stickit_bind_val'), 2);
equal(getSelectedOption(view.$('#test16')).eq(1).data('stickit_bind_val'), 2);

view.$('#test16 option:eq(3)').prop('selected', true).trigger('change');
view.$('#test16 option').eq(3).prop('selected', true).trigger('change');

equal(model.get('water').length, 4);

Expand Down Expand Up @@ -729,16 +729,16 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test16 option:selected:eq(0)').data('stickit_bind_val'), 1);
equal(view.$('#test16 option:selected:eq(1)').data('stickit_bind_val'), 3);
equal(getSelectedOption(view.$('#test16')).eq(0).data('stickit_bind_val'), 1);
equal(getSelectedOption(view.$('#test16')).eq(1).data('stickit_bind_val'), 3);

var field = _.clone(model.get('water'));
field += '-2';

model.set({'water':field});
equal(view.$('#test16 option:selected:eq(1)').data('stickit_bind_val'), 2);
equal(getSelectedOption(view.$('#test16')).eq(1).data('stickit_bind_val'), 2);

view.$('#test16 option:eq(3)').prop('selected', true).trigger('change');
view.$('#test16 option').eq(3).prop('selected', true).trigger('change');

equal(model.get('water'), '1-2-3-4');

Expand Down Expand Up @@ -768,14 +768,14 @@ $(document).ready(function() {

$('#qunit-fixture').html(view.render().el);

equal(view.$('#test8 option:selected').parent().is('optgroup'), true);
equal(view.$('#test8 option:selected').parent().attr('label'), 'Three Stooges');
equal(view.$('#test8 option:selected').data('stickit_bind_val'), 3);
equal(getSelectedOption(view.$('#test8')).parent().is('optgroup'), true);
equal(getSelectedOption(view.$('#test8')).parent().attr('label'), 'Three Stooges');
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 3);

model.set({'character':2});
equal(view.$('#test8 option:selected').data('stickit_bind_val'), 2);
equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 2);

view.$('#test8 option:eq(3)').prop('selected', true).trigger('change');
view.$('#test8 option').eq(3).prop('selected', true).trigger('change');
equal(model.get('character'), 4);
});

Expand Down
3 changes: 2 additions & 1 deletion test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

<link rel="stylesheet" href="vendor/qunit.css" type="text/css"/>

<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
<script type="text/javascript" src="vendor/zepto.js"></script>
<script type="text/javascript" src="vendor/zepto-data.js"></script>
<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
<script type="text/javascript" src="vendor/qunit.js"></script>
<script type="text/javascript" src="vendor/underscore.js"></script>
Expand Down
7 changes: 6 additions & 1 deletion test/testScaffolding.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$(document).ready(function() {

QUnit.testStart =function() {
QUnit.testStart = function() {

window.view = new (Backbone.View.extend({
model: null,
Expand All @@ -23,4 +23,9 @@ $(document).ready(function() {
delete window.view;
};

// Zepto does not have psuedo-selector support, so...
window.getSelectedOption = function($el) {
return $el.find('option').not(function(){ return !this.selected; });
};

});
73 changes: 73 additions & 0 deletions test/vendor/zepto-data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// Zepto.js
// (c) 2010-2012 Thomas Fuchs
// Zepto.js may be freely distributed under the MIT license.

// The following code is heavily inspired by jQuery's $.fn.data();
(function($) {
var data = {},
dataAttr = $.fn.data,
camelize = $.zepto.camelize,
exp = $.expando = 'Zepto' + (+new Date())

// Get value from node:
// 1. first try key as given,
// 2. then try camelized key,
// 3. fall back to reading "data-*" attribute.
function getData(node, name) {
var id = node[exp],
store = id && data[id]
if (name === undefined) return store || setData(node)
else {
if (store) {
if (name in store) return store[name]
var camelName = camelize(name)
if (camelName in store) return store[camelName]
}
return dataAttr.call($(node), name)
}
}

// Store value under camelized key on node
function setData(node, name, value) {
var id = node[exp] || (node[exp] = ++$.uuid),
store = data[id] || (data[id] = attributeData(node))
if (name !== undefined) store[camelize(name)] = value
return store
}

// Read all "data-*" attributes from a node
function attributeData(node) {
var store = {}
$.each(node.attributes, function(i, attr) {
if (attr.name.indexOf('data-') == 0) store[camelize(attr.name.replace('data-', ''))] = $.zepto.deserializeValue(attr.value)
})
return store
}

$.fn.data = function(name, value) {
return value === undefined ?
// set multiple values via object
$.isPlainObject(name) ? this.each(function(i, node) {
$.each(name, function(key, value) {
setData(node, key, value)
})
}) :
// get value from first element
this.length == 0 ? undefined : getData(this[0], name) :
// set value on all elements
this.each(function() {
setData(this, name, value)
})
}

$.fn.removeData = function(names) {
if (typeof names == 'string') names = names.split(/\s+/)
return this.each(function() {
var id = this[exp],
store = id && data[id]
if (store) $.each(names, function() {
delete store[camelize(this)]
})
})
}
})(Zepto)
Loading

0 comments on commit e2f1524

Please sign in to comment.