jquery - How can I inherit HTML templates? -
i'm using knockoutjs built-in template engine. i'd create master template other templates can build on. kinda usercontrol in .net in html.
example:
<script id="parenttemplate" type="text/html"> <div class="container"> <div class="header"> <!-- header content here --> </div> <div class="separator></div> <div class="body"> <!-- body content here --> </div> <!-- more html here... --> <div class="footer"> <!-- footer content here --> </div> </div> </script> <script id="childtemplate" type="text/html"> <div data-bind="{template: { name: 'parenttemplate' }}"> <header> ... </header> <body> ... </body> <footer> ... </footer> </div> </script> please ignore syntax of childtemplate; i'm trying illustrate sending parts parenttemplate.
please note: i'm building pure html/jquery/knockoutjs single-page application. there no .net/php/etc. assisting these templates.
have @ durandaljs composition. great framework think trying achieve
using durandaljs separate out various parts individual files
shell.html
<!doctype html> <html> <head> <!- usual content --> </head> <body> <div data-bind="compose:'views/parent.html'"></div> </body> </html> parent.html
<div class="container"> <div class="header" data-bind="compose:'views/header.html'"></div> <div class="separator></div> <div class="body" data-bind="compose:'views/body.html'"></div> <!-- more html here... --> <div class="footer" data-bind="compose:'views/footer.html'"></div> </div> i suggest @ documentation , there few templates have basics set-up
edit
using knockout use
javascript
var details = { header: 'this page header', details: 'page details go here', footer: 'something footer goes here' }; html templates
<script id="childtemplate" type="text/html"> <div data-bind="template: { name: 'parenttemplate', data: details }"></div> </script> <script id="parenttemplate" type="text/html"> <div class="container"> <div class="header" data-bind='text: header'></div> <div class="separator></div> <div class="body" data-bind="text: details"></div> <!-- more html here... --> <div class="footer" data-bind="text: footer"></div> </div> </script> if header,details , footer contain html markup suggest changing bindings text html renders properly.
Comments
Post a Comment