I have grown to appreciate the simplicity of handlebars js templating however there is one thing about it I still feel to be abit convuluted and was wondering if there was a simplier solution.
Problem:
The simple way of setting up handlebars
// Extract the text from the template .html() is the jquery helper method for that
var raw_template = $('#simple-template').html();
// Compile that into an handlebars template
var template = Handlebars.compile(raw_template);
// Retrieve the placeHolder where the Posts will be displayed
var placeHolder = $("#main");
// Create a context to render the template
var context = {posts:
[
{title: "First Post", entry: "You can't stop me now!", author: "Sandy Duster"},
{title: "2nd Post", entry: "Alice you are going in the wrong way."},
{title: "3rd Post", entry: "Mate, Where is my burger?"},
{title: "4th Post", entry: "The rainmaker day"},
]
}
// Generate the HTML for the template
var html = template(context);
// Render the posts into the page
placeHolder.append(html);
Everything above is currently whats required to add content into ONE container id (#main) using ONE handlebars template.
If I decided to add content to more containers using different templates I would have to compile it, retrieve the placeholder container, generate the html for the template, and append it inside the placeholder. I would have to do that for every single different template file.
My IDEAL scenario would be to call context or JSON data ONCE:
var context = {posts:
[
{title: "First Post", entry: "You can't stop me now!", author: "Sandy Duster"},
{title: "2nd Post", entry: "Alice you are going in the wrong way."},
{title: "3rd Post", entry: "Mate, Where is my burger?"},
{title: "4th Post", entry: "The rainmaker day"},
]
}
And then to SIMPLY go through the content inside body and insert {{page[0].name}}, {{imageURL}}, add content blocks and etc without having to INDIVIDUALLY define templates. Simple like how wordpress queries its post and displays content, query the database once and go through the page adding in pieces of queried content.
The squarespace developers platform works similar to this way, You don't have to insert templates or compile and render, you simply go through your html adding in {{.section title}}.
So my question is, is there a simple squarespace like method available that I could adopt? Or is squarespace simply had heavy backend code developed to allow for this kind of convenience?
Aucun commentaire:
Enregistrer un commentaire