Permalink
Browse files

[lib] device for using values as either textnodes or attributes

  • Loading branch information...
1 parent 9b2cf5e commit e269bbe19323e778cda7966650dac809055d1215 Paolo Fragomeni committed Nov 17, 2011
Showing with 61 additions and 9 deletions.
  1. +17 −2 README.md
  2. +44 −7 lib/plates.js
View
@@ -88,11 +88,26 @@ Plates will attempt to match the data key to the `id` of the element. If you wan
//
// A property map establishes the preferred mapping of data-key to tag property.
//
- var map = { "sample": "class" };
- var output = Plates.bind(html, data, map);
+ var options = { "sample": "class" };
+ var output = Plates.bind(html, data, options);
```
+#### An example of putting the new value into the attribute rather than the tag body.
+
+```js
+
+ var html = '<span></span><img id="bar" class="foo bazz" src=""/>';
+ var data = { "bazz": "Hello, World" };
+
+ var options = { "bazz": ["class", "src"] };
+
+ var output = Plates.bind(html, data, options);
+
+```
+
+The options object contains a mapping of option-key to data-key. In the above example, the option-key has an array value. The array can contain two values, the attribute name (1) and optionally the attribute to populate with the new value.
+
## License
(The MIT License)
View
@@ -30,10 +30,9 @@
while (matchedTag = this.tag.exec(html)) {
//
- // must not be a closing tag, must not be
- // self-closing, must have attributes.
+ // must not be a closing tag, must have attributes.
//
- if (matchedTag[1] !== '/' && matchedTag[3] !== '' && matchedTag[4] === '') {
+ if (matchedTag[1] !== '/' && matchedTag[3] !== '') {
if (!map) {
@@ -63,15 +62,18 @@
//
// an attribute who's value is a match.
//
- if (matchedAttr[1] === map[key]) {
+
+
+ if (matchedAttr[1] === map[key] ||
+ matchedAttr[1] === map[key][0]) {
match = false, idx = 0;
//
// if the preferred attribute is `class`, split the class and
// make sure that the actual key is a match with the data.
//
- if (map[key] === 'class') {
+ if (map[key] === 'class' || (map[key][0] && map[key][0] === 'class')) {
var classNames = matchedAttr[2].split(/\s+/);
for (var i = 0, l = classNames.length; i < l; i++) {
if (classNames[i] === key) {
@@ -84,10 +86,44 @@
// if there is a match from the class, or there is a match of
// the key, then splice the data into the string where it belongs.
//
+
if (matchedAttr[2] === key || match) {
+
var d = match ? key : matchedAttr[2];
- idx = matchedTag.index + matchedTag[0].length;
- html = html.slice(0, idx) + data[d] + html.slice(idx);
+
+ if (typeof map[key] === 'object') {
+
+ //
+ // find the attribute key/value pair in the tag.
+ //
+ var att = matchedTag[0].match(
+ new RegExp(map[key][1] + '\\s*=\\s*["|\'](.*)["|\']')
+ );
+
+ if (map[key][1]) {
+ //
+ // determine the start and end positions.
+ //
+ var start = matchedTag.index + att.index + (att[0].length - att[1].length);
+ var end = start + att[1].length;
+
+ html = html.slice(0, start-1) + data[d] + html.slice(end-1);
+ }
+ else if (matchedTag[4] !== '/') {
+ //
+ // must not be a self closing tag
+ //
+ idx = matchedTag.index + matchedTag[0].length;
+ html = html.slice(0, idx) + data[d] + html.slice(idx);
+ }
+ }
+ else {
+ //
+ // insert the value as a `textnode` into the tag.
+ //
+ idx = matchedTag.index + matchedTag[0].length;
+ html = html.slice(0, idx) + data[d] + html.slice(idx);
+ }
}
}
@@ -96,6 +132,7 @@
}
}
+
}
}

0 comments on commit e269bbe

Please sign in to comment.