Comments (10)
Not sure if nested templates are the way to go as they might complicate things, but if you plan to add them consider the following syntax (using data-bind here because it makes it obvious):
< ul data-bind="rows">< li>
....
and a json similar to
{ "rows": [ {"name":"Frank"},{"name" : "jones"}}
Second idea: invoke a callback whenever you hit a data bindable attribute with the ability to write additional text into the output stream. This way one could fetch partials easy.
Keeping it simple and easily understandable needs to be the primary goal.
from plates.
Thought about this a bit more. Another idea could be to start with a html file that represents full page content with all states as a designer might deliver (some wishful thinking here). A second package, which basically uses plate's parser would parse that template and look for data-template="mysubtemplatename" tags and extract the sub templates for later use with plates
This way the template itself would be WYSIWIG but easily plateable and the sub templates could be handled programmatically. There would be a tiny overhead as the template needs to be parsed an additional time on startup (hence an extra package) but I think it would have minimal performance impact.
Edit: Actually I think there would be zero overhead. I really think this approach should be considered.
from plates.
I like the idea of callbacks, will play with this in my test implementation.
In my test I have also been experimenting with a two stage render process where raw JS can manipulate the template(s) after the parse and before the bind. The idea of a callback might eliminate the need for this. I won't get into all the reasons right now, but I have given this problem much thought, partials is a tough area and to date I really don't like any of the solutions out there.
from plates.
Some of what I am working on may be beyond the scope of plates so this is just food for thought, below is a mock of a json doc that allows flexible nesting/partials. This is by no means a "complete" solution I am working this from the outside in with real world and somewhat complex requirements. after this doc is parsed, and before any templates or data are loaded, the presenter, controller or whatever it's called, can alter the data below, for example, this drives a site wide page template, and when viewing a blog post you could remove the "links" template from the sidebar and update the page title.
Not saying this should be part of plates, it's just one example of handling nesting.
var html_data =
{
head: {
title: 'Page Title'
},
body: {
header: [
{ data:'banner.json', view:'banner.html' },
{ data:'menu.json', view:'menu.html' }
],
content: [
// which comes first the chicken or the egg, callbacks could be useful here
{ data:'/Blog/A-Blog-Post.json', view:'blogPost.html' }
],
sidebar: [
{ data:'links.json', view:'link-list.html' },
{ data:'tags.json', view:'tag-cloud.html' }
],
footer: [
{ data:'footer.json', view:'footer.html' },
],
}
}
from plates.
I think something like this can be easily implemented outside of plates and then drive plates based on the json file. that combined with my proposed data-template syntax could be very strong but still supereasy to use.
from plates.
mwawrush, great to brainstorm this with you, been working hard on this problem for many months now and when I saw flatiron I was like oh cool, the ninjas are on it...
<div data-bind="post">
<h2 data-bind="title"></h2>
<span data-bind="bodyHtml"></span>
<p data-bind="fullName"></p>
</div>
<script>
var post = {
title: 'Post Title',
author : {
firstName: 'First',
lastName: 'Last'
}
body: [
{ view: 'paragraph.html', data: { text: 'Paragraph 1 Text' } },
{ view: 'paragraph.html', data: { text: 'Paragraph 2 Text' } },
{ view: 'paragraph.html', data: { text: 'Paragraph 3 Text' } }
]
}
// yes i'm mixing validation into the prototype but that would still be the responsibility
// of the validation layer we are just sharing the prototype, several ways to implement
var TEXT { type:'text', max:255 }
var DATETIME { type:'date' }
// prototype for all posts loaded and cached by plates and the validation layer in flatiron
var post_prototype {
title: TEXT,
published: DATETIME,
author: {
firstName: TEXT,
lastName: TEXT,
fullName: { valueOf: function() { return this.firstName + ' ' + this.lastName; } }
},
body: HTML,
// partials / nesting I kinda like this because there is no need to alter plates to support partials
bodyHtml: {
valueOf: function() {
for (var item in this.body) {
plates.render(item.view, item.data);
}
}
}
// no need for dot notation, this kinda smells but it keeps the data context intact
// valueOf could also be injected during the prototype parse and cached so you only need to declare the function
fullName: { valueOf: function() { return this.author.fullName; } }
}
</script>
from plates.
@mwawrusch you had some really good ideas on this. Did you still want to add these ideas to the readme or wiki?
from plates.
Any progress on this? I've been doing it casually for a couple years, and am working on getting an actual templating engine around it. Preliminary tests on JSfiddle blow the pants off moustache etc and the code is gorgeous as hell.
See tests in https://github.com/DavidSouther/JEFRi/tree/master/js/templates for samples.
from plates.
@DavidSouther I have been working on an API for using partials in Plates. I have added an append()
method to the Plates.Map
which allows you to use partials like this:
var map = Plates.Map();
var partial = Plates.Map();
partial.class('trolling').to('boink');
map.class('insert').append('<div class="trolling"></div>', { boink: 'moo' }, partial);
Plates.bind(html, data, map);
You can see the full progress at https://github.com/flatiron/plates/tree/manipulation
from plates.
Landed in master, closing this.
from plates.
Related Issues (20)
- Multiple clauses does not render correctly HOT 2
- Option to allow/disallow undefined attributes HOT 1
- Better common.js support HOT 1
- Provide a proper way to avoid XSS attacks
- Problem with function compileMappings, and how i (might have) fixed it.
- .append() or .partial doesn't work with inputs HOT 1
- Partials HOT 1
- Tests failing on latest Node.js HOT 1
- State of this library HOT 3
- Overrides elements with bad content HOT 2
- Plates (fork?) with some DSL HOT 1
- Collection iteration HOT 1
- Binding doesn't work as expected HOT 1
- Question, not Issue: Getting the innerHTML of a tag for multi-language support
- Not able to get the correct HTML output
- BUG: "Template" may not contain "Subtemplates" tag name HOT 1
- Old Version on Bower HOT 1
- Example project with template nesting HOT 1
- Mapping the same partial multiple times with collections example
- Map to a valueless attribute
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plates.