Commit 87f1a417 authored by Oskar Kalbag's avatar Oskar Kalbag

Added ability to inject data into the rendered template for client‐side...

Added ability to inject data into the rendered template for client‐side JavaScript to use. The App.net example with client‐side updates is working properly now.
parent b924bc82
......@@ -32,17 +32,34 @@ exports.__express = (path, data, callback) ->
# in the data object to the Tally object in the DOM.
#
#
# Copy custom formatter(s), if any.
# (Use custom formatters to modify values before they are rendered.)
#
customFormatters = data.__tally['formatters']
if customFormatters
window.tally.format[customFormatter] = customFormatters[customFormatter] for customFormatter of customFormatters
#
# Copy the beforeAttr and beforeText hooks.
# (Use hooks to perform actions before a node is modified—e.g., animate, run debug code.)
#
window.tally.beforeAttr = data.__tally['beforeAttr']
window.tally.beforeText = data.__tally['beforeText']
#
# Inject Data option: if set, this will result in a copy
# of the data being injected into the template at tally.data
# (Useful if you want to append to it via Ajax calls, etc.
# When rendering a timeline, for example.)
#
if data.__tally['injectData']
head = window.document.getElementsByTagName('head')[0]
script = window.document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.textContent = 'tally.data = ' + JSON.stringify(data, null, 2) + ';'
head.appendChild(script)
#
# Save the data on the DOM and run Tally.
#
......
{
"name": "tally",
"description": "Tally is a simple, unobtrusive JavaScript template engine for Express/Node and browser.",
"version": "0.0.1-15",
"version": "0.0.1-17",
"author": "Aral Balkan <aral@aralbalkan.com>",
"repository": {
"type": "git",
......@@ -15,10 +15,9 @@
"jsdom": "0.5.1",
"express": "3.0.x",
"superagent": "0.12.4",
"ghm": "1.0.0-3"
"ghm": "1.0.0-3",
},
"devDependencies": {
"nodemon": "0.7.2",
"coffee-script": "1.6.1"
},
"contributors": [
......
......@@ -17,11 +17,16 @@ exports.route = (request, response) ->
.end (error, globalTimelineResponse) ->
globalTimeline = globalTimelineResponse.body
# Attach a custom function to the data to count the number of posts
globalTimelineResponse.body.numberOfPosts = ->
globalTimeline.numberOfPosts = ->
return this.data.length
globalTimeline = globalTimelineResponse.body
# Ask for the data to be injected into the rendered template
# (we’re going to append to it via Ajax calls on the client‐side to render an
# expanding timeline of App.net posts.)
globalTimeline.__tally = { injectData: yes }
# Handle network and App.net errors gracefully.
if error
......@@ -40,4 +45,4 @@ exports.route = (request, response) ->
globalTimeline.error = "(##{globalTimeline.meta.code}) #{globalTimeline.meta.error_message}"
# Render the response
response.render 'posts-client-side-updates', globalTimelineResponse.body
response.render 'posts-client-side-updates', globalTimeline
......@@ -26,18 +26,34 @@
refreshTimelineButton.addEventListener('click', function(){
refreshTimelineButton.disabled = true;
progressIndicator.classList.toggle('hide')
progressIndicator.classList.toggle('hide');
superagent.get('https://alpha-api.app.net/stream/0/posts/stream/global').end(function(error, globalTimelineResponse) {
var lastID = tally.data.meta.max_id;
superagent
.get('https://alpha-api.app.net/stream/0/posts/stream/global')
.query({since_id: lastID})
.end(function(error, globalTimelineResponse) {
refreshTimelineButton.disabled = false;
progressIndicator.classList.toggle('hide');
var globalTimeline;
globalTimelineResponse.body.numberOfPosts = function() {
return this.data.length;
};
globalTimeline = globalTimelineResponse.body;
var numberOfNewPosts = globalTimeline.data.length;
var numberOfExistingPosts = tally.data.data.length;
if (0 == numberOfNewPosts) return;
globalTimeline.numberOfPosts = numberOfNewPosts + numberOfExistingPosts;
// Add the new data to the existing data
globalTimeline.data = globalTimeline.data.concat(tally.data.data);
// And save the current data as the tally data
tally.data = globalTimeline;
if (error) {
globalTimeline.errorType = 'Network';
globalTimeline.error = error;
......@@ -46,7 +62,7 @@
globalTimeline.errorType = 'App.net';
globalTimeline.error = "(#" + globalTimeline.meta.code + ") " + globalTimeline.meta.error_message;
}
tally(document.body, globalTimelineResponse.body);
tally(document.body, globalTimeline);
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment