https://www.mysubaru.com/js/subaru/jquery.fill.js

1// Handle array passed in [ partially coded, might need to double check possibilities
2//   First if check in resolve is probably key
3//   http://stackoverflow.com/questions/7545641/javascript-multidimensional-array
4//   
5//   waypoints[3][4][2].test[1].prop
6//   
7//   <span class=whatever data-fill="${testing}"></span> -- Fills innerHtml
8//   <img class=whatever data-fill="${testing}" />       -- Fills src
9//   <span class=whatever data-fill-class="${testing}" />       -- Fills src
10//   
11// Handle data that are objects
12// Handle elements that are arrays
13// // 
14// Future : Look at using eval
15// Future : return promise? What is an error? // Future return a list of errors or issues. 
16// -- Use extend if need to pass multiple data
17// -- Use empty to clear out data first
18//
19// ${[formatters]:fieldName}
20// ${trim;lower;round,2:obj.array[1].field}
21// Option to add new html right below existing html? We'll see
22//
23// options:
24//   onResolveItem : return true or false based on if data elements should be resolved
25//   onCustomData( obj, index ) : return object that will be merged with current data options for fill
26//   onCompleteItem( $elem, data ) ; return completed built element from template with data used to build element
27//   
28//   [lookForClasses]
29//   [lookForText]
30//   [lookForForm]
31//   [classToRemove]
32
33
34(function ($) {
35  
36  var defaultOptions = { emptyOnNotFound : true, dataAttribute : "fill" };
37
38  $.fn.fillElem = function ( data, _options) {
39
40    var options = $.extend({}, defaultOptions, _options);    
41
42    this.each(function () {
43      var _fill = $(this).data( options.dataAttribute );
44      if (_fill) {
45        $(this).html(subValues(_fill, data, options));
46      }
47    });
48
49  };
50
51  $.fn.fillElem.format = [];
52  
53  $.fn.fillElem.format[ 'trim' ] = function (val) {
54    return val.toString().trim();
55  };
56  $.fn.fillElem.format[ 'lower' ] = function (val) {
57    return val.toString().toLowerCase();
58  };
59  
60  $.fn.fillHtml = function ($temp, dataOrArray, _options) {
61
62    var options = $.extend({}, defaultOptions, _options);
63
64    var outerHtml = $temp.prop('outerHTML');
65
66    if ($.isArray(dataOrArray))
67      for (var i in dataOrArray) {
68        var html = subValues(outerHtml, dataOrArray[ i ], options, i);
69        var $elem = $($.parseHTML(html));
70
71        if (options.onCompleteItem)
72          options.onCompleteItem($elem, dataOrArray[ i ]);
73
74        this.append($elem);
75      }
76    else {
77
78      var html = subValues(outerHtml, dataOrArray, options, i);
79      var $elem = $($.parseHTML(html));
80
81      if (options.onCompleteItem)
82        options.onCompleteItem($elem, dataOrArray);
83
84      this.append($elem);
85    }
86
87  };
88
89  // Different object formats:
90  // data.parts[ 4 ].obj[ 5 ]
91
92  // Might need to resolve the object if it is the last value, otherwise recursively call function
93
94  function resolveObject(sel, $obj) {
95
96    // Handle if object selector
97    if (sel == "")
98      return $obj;
99    else if (sel.indexOf(".") >= 0) {
100      var first = sel.substring(0, sel.indexOf("."));
101      var rest = sel.substring(sel.indexOf(".") + 1);
102      return resolveObject(rest, $obj[ first ]);
103
104      // Handle named array, points[ 5 ]
105    } else if (sel.indexOf("[") >= 0) {
106      var parts = sel.split(/[/[/]/);
107
108      var elem = $obj[ parts[ 1 ].trim() ];
109      var rest = sel.substring(sel.indexOf("]") + 1);
110      return resolveObject(rest, elem);
111
112    } else {
113      return $obj[ sel ];
114    }
115
116  }
117
118  function subValues(templateString, _data, options, index) {
119
120    var data = _data;
121    if ( options.onCustomData)
122      data = $.extend({}, _data, options.onCustomData(_data, index));
123
124    if ( options.onResolveData)
125      if (!options.onResolveData(data))
126        return "";
127
128    var regex = new RegExp( "\\$_\\{[\\w:_\\-\\[\\]\\.]*\\}", "g" );
129    var result = templateString.replace( regex, function (pattern) {
130      
131      var expr = pattern.substring( "$_{".length, pattern.length - 1);
132      var parts = expr.split(":");
133
134      var sel = parts[ parts.length - 1 ];
135      var fmt = parts.length > 1 ? parts[ 0 ] : null;
136
137      var raw = resolveObject(sel, data);
138      
139      var _result;
140      
141      if( raw ) {
142        if (fmt && $.fn.fillElem.format[ fmt ])
143          _result = $.fn.fillElem.format[ fmt ](raw);

144        else
145          _result = raw;
146      } else {
147        if( options.emptyOnNotFound )
148          _result = "";
149        else
150          _result = pattern;
151      }
152
153      return _result;
154
155    });
156    
157    
158    return result;
159
160
161  }
162
163}(jQuery));