Skip to content

Commit ecd4c40

Browse files
powmediapowmedia
committed
Make templating radio editor easier
1 parent 169def7 commit ecd4c40

File tree

6 files changed

+146
-41
lines changed

6 files changed

+146
-41
lines changed

‎distribution.amd/backbone-forms.js‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1746,6 +1746,15 @@ Form.editors.Radio = Form.editors.Select.extend({
17461746
}
17471747
},
17481748

1749+
/**
1750+
* Returns the template. Override for custom templates
1751+
*
1752+
* @return {Function} Compiled template
1753+
*/
1754+
getTemplate: function() {
1755+
return this.schema.template || this.constructor.template;
1756+
},
1757+
17491758
getValue: function() {
17501759
return this.$('input[type=radio]:checked').val();
17511760
},
@@ -1779,27 +1788,46 @@ Form.editors.Radio = Form.editors.Select.extend({
17791788
* @return {String} HTML
17801789
*/
17811790
_arrayToHtml: function (array) {
1782-
var html = [];
17831791
var self = this;
17841792

1785-
_.each(array, function(option, index) {
1786-
var itemHtml = '<li>';
1787-
if (_.isObject(option)) {
1788-
var val = (option.val || option.val === 0) ? option.val : '';
1789-
itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
1790-
itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
1793+
var template = this.getTemplate(),
1794+
name = self.getName(),
1795+
id = self.id;
1796+
1797+
var items = _.map(array, function(option, index) {
1798+
var item = {
1799+
name: name,
1800+
id: id + '-' + index
17911801
}
1792-
else {
1793-
itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
1794-
itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
1802+
1803+
if (_.isObject(option)) {
1804+
item.value = (option.val || option.val === 0) ? option.val : '';
1805+
item.label = option.label;
1806+
} else {
1807+
item.value = option;
1808+
item.label = option;
17951809
}
1796-
itemHtml += '</li>';
1797-
html.push(itemHtml);
1810+
1811+
return item;
17981812
});
17991813

1800-
return html.join('');
1814+
return template({ items: items });
18011815
}
18021816

1817+
}, {
1818+
1819+
//STATICS
1820+
template: _.template('\
1821+
<ul>\
1822+
<% _.each(items, function(item) { %>\
1823+
<li>\
1824+
<input type="radio" name="<%= item.name %>" value="<%= item.value %>" id="<%= item.id %>" />\
1825+
<label for="<%= item.id %>"><%= item.label %></label>\
1826+
</li>\
1827+
<% }); %>\
1828+
</ul>\
1829+
', null, Form.templateSettings)
1830+
18031831
});
18041832

18051833
/**

‎distribution.amd/backbone-forms.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎distribution/backbone-forms.js‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1759,6 +1759,15 @@ Form.editors.Radio = Form.editors.Select.extend({
17591759
}
17601760
},
17611761

1762+
/**
1763+
* Returns the template. Override for custom templates
1764+
*
1765+
* @return {Function} Compiled template
1766+
*/
1767+
getTemplate: function() {
1768+
return this.schema.template || this.constructor.template;
1769+
},
1770+
17621771
getValue: function() {
17631772
return this.$('input[type=radio]:checked').val();
17641773
},
@@ -1792,27 +1801,46 @@ Form.editors.Radio = Form.editors.Select.extend({
17921801
* @return {String} HTML
17931802
*/
17941803
_arrayToHtml: function (array) {
1795-
var html = [];
17961804
var self = this;
17971805

1798-
_.each(array, function(option, index) {
1799-
var itemHtml = '<li>';
1800-
if (_.isObject(option)) {
1801-
var val = (option.val || option.val === 0) ? option.val : '';
1802-
itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
1803-
itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
1806+
var template = this.getTemplate(),
1807+
name = self.getName(),
1808+
id = self.id;
1809+
1810+
var items = _.map(array, function(option, index) {
1811+
var item = {
1812+
name: name,
1813+
id: id + '-' + index
18041814
}
1805-
else {
1806-
itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
1807-
itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
1815+
1816+
if (_.isObject(option)) {
1817+
item.value = (option.val || option.val === 0) ? option.val : '';
1818+
item.label = option.label;
1819+
} else {
1820+
item.value = option;
1821+
item.label = option;
18081822
}
1809-
itemHtml += '</li>';
1810-
html.push(itemHtml);
1823+
1824+
return item;
18111825
});
18121826

1813-
return html.join('');
1827+
return template({ items: items });
18141828
}
18151829

1830+
}, {
1831+
1832+
//STATICS
1833+
template: _.template('\
1834+
<ul>\
1835+
<% _.each(items, function(item) { %>\
1836+
<li>\
1837+
<input type="radio" name="<%= item.name %>" value="<%= item.value %>" id="<%= item.id %>" />\
1838+
<label for="<%= item.id %>"><%= item.label %></label>\
1839+
</li>\
1840+
<% }); %>\
1841+
</ul>\
1842+
', null, Form.templateSettings)
1843+
18161844
});
18171845

18181846
/**

‎distribution/backbone-forms.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/editors/radio.js‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ Form.editors.Radio = Form.editors.Select.extend({
2929
}
3030
},
3131

32+
/**
33+
* Returns the template. Override for custom templates
34+
*
35+
* @return {Function} Compiled template
36+
*/
37+
getTemplate: function() {
38+
return this.schema.template || this.constructor.template;
39+
},
40+
3241
getValue: function() {
3342
return this.$('input[type=radio]:checked').val();
3443
},
@@ -62,25 +71,44 @@ Form.editors.Radio = Form.editors.Select.extend({
6271
* @return {String} HTML
6372
*/
6473
_arrayToHtml: function (array) {
65-
var html = [];
6674
var self = this;
6775

68-
_.each(array, function(option, index) {
69-
var itemHtml = '<li>';
70-
if (_.isObject(option)) {
71-
var val = (option.val || option.val === 0) ? option.val : '';
72-
itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
73-
itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
76+
var template = this.getTemplate(),
77+
name = self.getName(),
78+
id = self.id;
79+
80+
var items = _.map(array, function(option, index) {
81+
var item = {
82+
name: name,
83+
id: id + '-' + index
7484
}
75-
else {
76-
itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
77-
itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
85+
86+
if (_.isObject(option)) {
87+
item.value = (option.val || option.val === 0) ? option.val : '';
88+
item.label = option.label;
89+
} else {
90+
item.value = option;
91+
item.label = option;
7892
}
79-
itemHtml += '</li>';
80-
html.push(itemHtml);
93+
94+
return item;
8195
});
8296

83-
return html.join('');
97+
return template({ items: items });
8498
}
8599

100+
}, {
101+
102+
//STATICS
103+
template: _.template('\
104+
<ul>\
105+
<% _.each(items, function(item) { %>\
106+
<li>\
107+
<input type="radio" name="<%= item.name %>" value="<%= item.value %>" id="<%= item.id %>" />\
108+
<label for="<%= item.id %>"><%= item.label %></label>\
109+
</li>\
110+
<% }); %>\
111+
</ul>\
112+
', null, Form.templateSettings)
113+
86114
});

‎test/editors/radio.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,27 @@
9191
});
9292

9393

94+
module('#getTemplate()');
95+
96+
test('returns schema template first', function() {
97+
var template = _.template('<div>');
98+
99+
var editor = new Editor({
100+
schema: { template: template, options: [] }
101+
});
102+
103+
equal(editor.getTemplate(), template);
104+
});
105+
106+
test('then constructor template', function() {
107+
var editor = new Editor({
108+
schema: { options: [] }
109+
});
110+
111+
equal(editor.getTemplate(), Editor.template);
112+
});
113+
114+
94115

95116
module('Radio events', {
96117
setup: function() {

0 commit comments

Comments
 (0)