{"ScriptPreparationCode":"function _buildData(count) {\r\n count = count || 1000;\r\n var adjectives = [\u0022pretty\u0022, \u0022large\u0022, \u0022big\u0022, \u0022small\u0022, \u0022tall\u0022, \u0022short\u0022, \u0022long\u0022, \u0022handsome\u0022, \u0022plain\u0022, \u0022quaint\u0022, \u0022clean\u0022, \u0022elegant\u0022, \u0022easy\u0022, \u0022angry\u0022, \u0022crazy\u0022, \u0022helpful\u0022, \u0022mushy\u0022, \u0022odd\u0022, \u0022unsightly\u0022, \u0022adorable\u0022, \u0022important\u0022, \u0022inexpensive\u0022, \u0022cheap\u0022, \u0022expensive\u0022, \u0022fancy\u0022];\r\n var colours = [\u0022red\u0022, \u0022yellow\u0022, \u0022blue\u0022, \u0022green\u0022, \u0022pink\u0022, \u0022brown\u0022, \u0022purple\u0022, \u0022brown\u0022, \u0022white\u0022, \u0022black\u0022, \u0022orange\u0022];\r\n var nouns = [\u0022table\u0022, \u0022chair\u0022, \u0022house\u0022, \u0022bbq\u0022, \u0022desk\u0022, \u0022car\u0022, \u0022pony\u0022, \u0022cookie\u0022, \u0022sandwich\u0022, \u0022burger\u0022, \u0022pizza\u0022, \u0022mouse\u0022, \u0022keyboard\u0022];\r\n var data = [];\r\n for (var i = 0; i \u003C count; i\u002B\u002B) {\r\n data.push({\r\n id: i \u002B 1,\r\n label: adjectives[_random(adjectives.length)] \u002B \u0022 \u0022 \u002B colours[_random(colours.length)] \u002B \u0022 \u0022 \u002B nouns[_random(nouns.length)]\r\n });\r\n }\r\n return data;\r\n}\r\n\r\nfunction _random(max) {\r\n return Math.round(Math.random() * 1000) % max;\r\n}","TestCases":[{"Name":"HTML Fragment","Code":"var fragment = document.createDocumentFragment(),\r\n $raw = document.querySelector(\u0027#raw-revision\u0027),\r\n data = _buildData();\r\n\r\ndata.forEach(function(row) {\r\n var rowDiv = document.createElement(\u0027div\u0027);\r\n var innerDiv = document.createElement(\u0027div\u0027);\r\n var span = document.createElement(\u0027span\u0027);\r\n\r\n rowDiv.className = \u0027row\u0027;\r\n innerDiv.className = \u0027col-md-12 test-data\u0027;\r\n span.textContent = row.label;\r\n\r\n rowDiv.appendChild(innerDiv);\r\n innerDiv.appendChild(span);\r\n\r\n fragment.appendChild(rowDiv);\r\n});\r\n\r\n$raw.appendChild(fragment);\r\n\r\n$raw.addEventListener(\u0027click\u0027, function(e) {\r\n if (e.currentTarget.className === \u0027span\u0027) {\r\n document.querySelector(\u0027.selected\u0027).className = \u0027\u0027;\r\n e.currentTarget.className = \u0027selected\u0027;\r\n }\r\n});","IsDeferred":false},{"Name":"Original DOM Manipulation Code","Code":"var data = _buildData(),\r\n template = $(\u0022#raw-template\u0022).html(),\r\n html = \u0022\u0022;\r\n\r\ndocument.getElementById(\u0022raw-original\u0022).innerHTML = \u0022\u0022;\r\n\r\nfor (var i = 0; i \u003C data.length; i\u002B\u002B) {\r\n var render = template;\r\n render = render.replace(\u0022{{className}}\u0022, \u0022\u0022);\r\n render = render.replace(\u0022{{label}}\u0022, data[i].label);\r\n html \u002B= render;\r\n}\r\n\r\ndocument.getElementById(\u0022raw-original\u0022).innerHTML = html;\r\n\r\n$(\u0022#raw\u0022).on(\u0022click\u0022, \u0022.test-data span\u0022, function() {\r\n $(\u0022#raw .selected\u0022).removeClass(\u0022selected\u0022);\r\n $(this).addClass(\u0022selected\u0022);\r\n});","IsDeferred":false},{"Name":"DOM Manipulation with Templates","Code":"var data = _buildData(),\r\n template = function(obj) {\r\n return [\r\n \u0027\u003Cdiv class=\u0022col-md-12 test-data\u0022\u003E\u0027,\r\n \u0027\u003C span class = \u0022\u0027, obj.className ,\u0027\u0022 \u003E\u0027, obj.label,\u0027 \u003C /span\u003E\u0027,\r\n \u0027\u003C/div \u003E\u0027].join(\u0027\u0027);\r\n },\r\n raw = document.getElementById(\u0022raw-original\u0022),\r\n html = \u0022\u0022;\r\n\r\nraw.innerHTML = \u0022\u0022;\r\n\r\nvar div;\r\nfor (var i = 0; i \u003C data.length; i\u002B\u002B) {\r\n div = document.createElement(\u0027div\u0027);\r\n div.innerHTML = template({\r\n \u0027className\u0027: \u0027\u0027,\r\n \u0027label\u0027: data[i].label\r\n });\r\n raw.appendChild(div);\r\n}\r\n\r\n\r\n$(raw).on(\u0022click\u0022, \u0022.test-data span\u0022, function() {\r\n $(\u0022.selected\u0022, raw).removeClass(\u0022selected\u0022);\r\n $(this).addClass(\u0022selected\u0022);\r\n});","IsDeferred":false},{"Name":"React","Code":"\r\nvar Class = React.createClass({\r\n select: function(data) {\r\n this.props.selected = data.id;\r\n this.forceUpdate();\r\n },\r\n render: function() {\r\n var items = [];\r\n for (var i = 0; i \u003C this.props.data.length; i\u002B\u002B) {\r\n items.push(React.createElement(\u0022div\u0022, {\r\n className: \u0022row\u0022\r\n },\r\n React.createElement(\u0022div\u0022, {\r\n className: \u0022col-md-12 test-data\u0022\r\n },\r\n React.createElement(\u0022span\u0022, {\r\n className: this.props.selected === this.props.data[i].id ? \u0022selected\u0022 : \u0022\u0022,\r\n onClick: this.select.bind(null, this.props.data[i])\r\n }, this.props.data[i].label)\r\n )\r\n ));\r\n }\r\n\r\n return React.createElement(\u0022div\u0022, null, items);\r\n }\r\n});\r\n\r\nvar data = _buildData();\r\n\r\nReact.render(new Class({\r\n data: data,\r\n selected: null\r\n}), document.querySelector(\u0027#raw-react\u0027));","IsDeferred":false}]}