From ca47490350a4729d8b874fca3ac50691f8827d4e Mon Sep 17 00:00:00 2001 From: David Humphrey Date: Mon, 14 Feb 2011 18:28:06 -0500 Subject: [PATCH] Fixing review comments. --- plugins/mustache/popcorn.mustache.html | 6 +-- plugins/mustache/popcorn.mustache.js | 63 ++++++++++++----------- plugins/mustache/popcorn.mustache.unit.js | 20 +++---- 3 files changed, 47 insertions(+), 42 deletions(-) diff --git a/plugins/mustache/popcorn.mustache.html b/plugins/mustache/popcorn.mustache.html index 50e96b72..668ac2bd 100644 --- a/plugins/mustache/popcorn.mustache.html +++ b/plugins/mustache/popcorn.mustache.html @@ -29,7 +29,7 @@ "{{/empty}}" , data: '{' + - ' "header": "Colors", ' + + ' "header": "Test 1", ' + ' "items": [ ' + ' {"name": "red", "first": true, "url": "#Red"}, ' + ' {"name": "green", "link": true, "url": "#Green"}, ' + @@ -61,7 +61,7 @@ "{{/empty}}" ; }, data: { - header: "Colors", + header: "Test 2", items: [ { name: "red", first: true, url: "#Red" }, { name: "green", link: true, url: "#Green" }, @@ -94,7 +94,7 @@ data: function(plugin, options) { return JSON.parse('' + '{' + - ' "header": "Colors", ' + + ' "header": "Test 3", ' + ' "items": [ ' + ' {"name": "red", "first": true, "url": "#Red"}, ' + ' {"name": "green", "link": true, "url": "#Green"}, ' + diff --git a/plugins/mustache/popcorn.mustache.js b/plugins/mustache/popcorn.mustache.js index b9bc0210..0aa06ac4 100644 --- a/plugins/mustache/popcorn.mustache.js +++ b/plugins/mustache/popcorn.mustache.js @@ -39,9 +39,8 @@ * data: the data to be rendered using the mustache template. This can be a JSON String, * a JavaScript Object literal, or a Function returning a String or Literal. * - * static: an optional argument indicating that the template and json data are static - * and can be safely preloaded and cached. Defaults to False (i.e., json data - * will be loaded only when needed, and every time needed vs. at setup). + * dynamic: an optional argument indicating that the template and json data are dynamic + * and need to be loaded dynamically on every use. Defaults to True. * * Example: var p = Popcorn('#video') @@ -77,7 +76,7 @@ ' ],' + ' "empty": false' + '}', - static: true // The json is not going to change, load it early. + dynamic: false // The json is not going to change, load it early. } ) // Example showing Functions instead of Strings. @@ -99,11 +98,13 @@ Popcorn.plugin( "mustache" , function() { - var getData, - data, - getTemplate, - template, - self; + function get( name, options ) { + return options._instance[name]; + } + + function set( name, options, value ) { + options._instance[name] = value; + } return { manifest: { @@ -119,54 +120,58 @@ target : 'mustache-container', template : {elem:'input', type:'text', label:'Template'}, data : {elem:'input', type:'text', label:'Data'}, - static : {elem:'input', type:'checkbox', label:'Static'} /* TODO: how to show a checkbox/boolean? */ + dynamic : {elem:'input', type:'text', label:'Dynamic'} /* TODO: how to show a checkbox/boolean? */ } }, _setup : function( options ) { - this.start = options.start; - this.end = options.end; + options._instance = { getData: null, + data: null, + getTemplate: null, + template: null }; + + var shouldReload = !!options.dynamic; if (typeof options.template === 'function') { - if (options.static) { - template = options.template(this, options); + if (!shouldReload) { + set('template', options, options.template(options)); } else { - getTemplate = options.template; + set('getTemplate', options, options.template); } } else if (typeof options.template === 'string') { - template = options.template; + set('template', options, options.template); } else { throw "Mustache Plugin Error: options.template must be a String or a Function."; } if (typeof options.data === 'function') { - if (options.static) { - data = options.data(this, options); + if (!shouldReload) { + set('data', options, options.data(options)); } else { - getData = options.data; + set('getData', options, options.data); } } else if (typeof options.data === 'string') { - data = JSON.parse(options.data); + set('data', options, JSON.parse(options.data)); } else if (typeof options.data === 'object') { - data = options.data; + set('data', options, options.data); } else { throw "Mustache Plugin Error: options.data must be a String, Object, or Function."; } - - self = this; }, start: function( event, options ) { - // if not static=true, freshen json data on every call to start, just in case. - if (getData) { - data = getData(this, options); + // if dynamic, freshen json data on every call to start, just in case. + if (get('getData', options)) { + set('data', options, get('getData', options)(options)); } - if (getTemplate) { - template = getTemplate(this, options); + if (get('getTemplate', options)) { + set('template', options, get('getTemplate', options)(options)); } - var html = Mustache.to_html(template, data).replace(/^\s*/mg, ''); + var html = Mustache.to_html( get('template', options), + get('data', options) + ).replace(/^\s*/mg, ''); document.getElementById(options.target).innerHTML = html; }, diff --git a/plugins/mustache/popcorn.mustache.unit.js b/plugins/mustache/popcorn.mustache.unit.js index aae2a207..53b3af21 100644 --- a/plugins/mustache/popcorn.mustache.unit.js +++ b/plugins/mustache/popcorn.mustache.unit.js @@ -26,9 +26,9 @@ test("Popcorn Mustache Plugin", function () { start: 1, // seconds end: 3, // seconds template: "

{{heading}}

", - data: '{"heading": "mustache"}', + data: '{"heading": "mustache - test 1/3"}', target: 'mustache-div', - static: true + dynamic: false } ); // Dynamic functions @@ -39,7 +39,7 @@ test("Popcorn Mustache Plugin", function () { return "

{{heading}}

"; }, data: function(plugin, options) { - return JSON.parse('{"heading": "mustache"}'); + return JSON.parse('{"heading": "mustache - test 2/3"}'); }, target: 'mustache-div', } ); @@ -51,9 +51,9 @@ test("Popcorn Mustache Plugin", function () { template: function(plugin, options) { return "

{{heading}}

"; }, - data: { heading: "mustache" }, + data: { heading: "mustache - test 3/3" }, target: 'mustache-div', - static: true + dynamic: false } ); var video = document.getElementById('video'); @@ -61,21 +61,21 @@ test("Popcorn Mustache Plugin", function () { video.addEventListener('timeupdate', function() { - function pass() { - ok( /

mustache<\/h1>/.test( mustacheDiv.innerHTML ), "Mustache template rendered" ); + function pass(a, b) { + ok( "

mustache - test " + a + "/" + b + "<\/h1>" === mustacheDiv.innerHTML, "Mustache template rendered" ); plus(); } var t = Math.floor(video.currentTime); if (t === 2 && !two) { - pass(); + pass(1, 3); two = true; } else if (t === 6 && !six) { - pass(); + pass(2, 3); six = true; } else if (t === 10 && !ten) { - pass(); + pass(3, 3); ten = true; }