I'm using assemble for prototyping a new site.
I would like to modularize my code quite drastically, much like Brad Frost is evangelizing with his pattern lab.
EXAMPLE
Basically I would like to have a title partial ("atom" in pattern-lab speak) which is used inside a hero partial ("molecule"):
title.hbs
<h1 class="{{class}}">{{text}}</h1>
hero.hbs
<section class="hero-unit">
{{!-- image and stuff --}}
<header class="hero-description">
{{> title }}
{{> subTitle }}
</header>
</section>
The hero partial is supposed to generic; I want to pass in data from JSON files per particular page. For my pages, I use a default layout that offers blocks. For example:
default.hbs
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
{{#block "hero"}}{{/block}}
{{#block "body"}}{{/block}}
</body>
</html>
myPageWithHero.hbs
{{#extend "default"}}
{{#content "hero"}}
{{ >hero }}
{{/content}}
{{#content "body"}}
{{!-- myPageContent --}}
{{/content}}
{{/extend}}
Now I'd like to set {{text}} inside the title partial which is inside the hero partial via the myPageWithHero.json file that I have. Is that at all possible? Or is my approach (which I have described in this very oversimplified example) completely deranged?
Cheers for any pointers! :-)
#polarbirke since you want to use the data from myPageWithHero.json, that data will be available on the page object when rendering myPageWithHero.hbs, so you can pass that object to the hero partial. This will setup the context for that partial and the title partial will inherit that context:
{{#extend "base"}}
{{#content "hero"}}
{{> hero page}}
{{/content}}
{{#content "body"}}
{{!-- myPageContent --}}
{{/content}}
{{/extend}}
If you have other objects in your data that you'd like to use instead, you can pass that instead:
data.json
{
"title1": {
"class": "success",
"text": "Good Title"
},
"title2": {
"class": "error",
"text": "Bad Title"
}
}
myPageWithHero.hbs
{{#extend "base"}}
{{#content "hero"}}
{{> hero title1}}
{{/content}}
{{#content "body"}}
{{!-- myPageContent --}}
{{/content}}
{{/extend}}
I hope this helps, let me know if you have any questions.
Related
In
locale/lang.json I have
{
"title": "Title",
"image": "service-corporate_thumb-v2.jpg",
"alt": "alt",
"imageFooter": "Some caption %",
"imageFooterCTA": "author",
"imageFooterURL": "https://example.com/author",
},
I'm trying to generate the author like, like so:
<img :src="require(`~/assets/img/services/${service.image}`)" :alt="service.alt" class="mb-8">
<p>{{ service.imageFooter.replace('%', `${service.imageFooterCTA}`) }}</p>
But this prints out in the generated HTML:
{{ service.imageFooter.replace('%', `${service.imageFooterCTA}`) }}
How can I generate html inside the {{ expresion }} ?
You need to use v-html for generating html in a template.
More info here.
For your example try this
<p class="mb-8">
<a v-html="service.imageFooter.replace('%', '$' + service.imageFooterCTA + '')">
</p>
Notes:
the tag that has a v-html directive will be replaced, so you could use anything, not only a
the value for v-html needs to be valid JS code that will be executed in the current context. This the reason I treated the tag inside as a string and removed the interpolation {.
I have a mongo database with a document that contains some html in it, and when I try to take it and put it on a webpage, it just displays as the actual text and not the html. Here is the json with the html:
db.games.insert({
title: "Minecraft",
background: "/images/minecraft.jpg",
code: "<div id=\"gameBackround\" class=\"col-lg-2 popular-games view view-first\" style=\"background-image:url( /images/gameArt/minecraft.jpg )\"> <div class=\"mask\"> <h2>Minecraft</h2> <p>Amount of groups playing this title now: 11,075</p> Join Lobby </div> </div> <style> </style>"
})
and here is how I display it on the page:
<template name="example">
{{code}}
</template>
Use should use triple curly braces to escape html code returned from a helper.
<template name="example">
{{{code}}}
</template>
Here is an example.
The goal is to use the variables defined in the front-matter section in a particular page.
Here my structure of the file system:
_Components
c1.html
c2.html
Here I have defined the attributes in the front-matters.
_Includes > Components
c1.html
Here I want to use a loop to refer to a variable defined in the _Components > c1.html page.
How can I achieve this goal ?
In my _Includes > Components > c1.html I have the following code:
<body class="full">
{% assign fullcomponents = site.components %}
{% for component in fullcomponents | where:"title","c1html" %}
{% component.title %}
{% endfor %}
<div class="container-fluid" id="componentscontainer">
<div class="col-md-12">
<div class="panel panel-primary" id ="panelcomponentlarge">
<div class="panel-heading" >
Chart C3 Line
</div>
etc...
Surely I'm missing some trivial things.
SECOND ATTEMPT
I figured out that I can provide a data layer for that so, I tried to split this information into a new data file.
Here the content of components.json
{
"Components": [
"ChartC3Line":{
"component":"ChartC3Line",
"description":"This is an attempt"
},
"ChartC3Lines":{
"component":"ChartC3Lines",
"description":"This is an attempt"
}
]
}
And I'm trying to get this information with the following code:
{% assign comp = site.data.components.Components[ChartC3Line] %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
but anything is coming up.
THIRD ATTEMPT
I found a solution but I don't like it at all here my new json file
{
"ChartC3":[
{
"component":"ChartC3Line",
"description":"This is an attempt"
}],
"ChartC4":[
{
"component":"ChartC3Line",
"description":"This is an attemptSSSSSSS"
}]
}
I don't want to have an object of several arrays of one element!
Here the code to retrieve the right information:
{% assign comp = site.data.components.ChartC4[0] %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
SOLVED
Following the structure of a json file, I changed my structure in an easier way:
{
"ChartC3":
{
"component":"ChartC3Line",
"description":"This is an attempt"
},
"ChartC4":
{
"component":"ChartC3Line",
"description":"This is an attemptSSSSSSS"
}
}
Now I can easily have access to the right object.
{% assign comp = site.data.components.ChartC3 %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
I am just starting off with angular, but basically I want to render one set of templates with ng repeat:
<ion-item ng-repeat="item in items" ng-click="loadSingle(item)">
Hello, {{item.name}}!
</ion-item>
and then later I want to render the object in a different template if someone clicks on it:
<div>
<h1>{{ item.name }}</h1>
<h2>{{ item.detail }}</h2>
</div>
How do I do this? With jQuery/underscore I would just have the separate template loaded and feed it the json object (item) but I can't seem to find any documentation on how to do the templating without the ng-repeat. I'm a little confused. Thanks!
I would define loadSingle() as a method that would put the specific item onto the scope. Then I would define another section in the HTML to display the selected item.
JavaScript
app.controller('ctrl', function($scope){
$scope.loadSingle = function(item){
$scope.selectedItem = item;
}
});
HTML
<div ng-show="selectedItem">
<h1>{{ selectedItem.name }}</h1>
<h2>{{ selectedItem.detail }}</h2>
</div>
I'm looking for a simple way to create some static html page designs but using handlebars partials to ease the handover to the developer. i.e. create
index.html
sidebar.html
main.html
product.html
product_stub.html
and so on. Then a simple way to build up the pages so I can see them in Chrome:
index.html:
<html>
...
<body>
<div class="sidebar">{{ include sidebar.html }}</div>
<div class="main">{{ include main.html }}</div>
</body>
main.html:
{% for i in 0 to 10 %}
{{ include product_stub.html }}
{% endfor %}
Then product_stub.html might look like:
<div class="product-stub">
<h2>Product Name</h2>
<p>some lipsum text...</p>
</div>
Then ideally the developer could take these same files, add in the magic - then the designer could edit to tweak the design..
Take a look at assemble, it's specifically for this purpose.
We created a "load" handlebars helper that loads in a template:
cache = {}
template = (name) ->
t = cache[name]
if t?
return t
raw = null
$.ajax
url: "/static/templates/#{ name}.hbs"
async: no
type: 'GET'
.done (text) ->
raw = text
.fail (err) ->
if window.appdebug
# if app is running in "debug" mode, fallback to possible design
# template
url = "/static/design/#{ name }"
url = url + '.hbs' if not url.match(/\.hbs$/)
$.ajax
url: url
async: no
type: 'GET'
.done (text) ->
raw = text
if not raw?
throw "Cannot fetch template #{ name }"
t = Handlebars.compile(raw)
cache[name] = t
t
Handlebars.registerHelper "load", (name, ctx) ->
new Handlebars.SafeString(template(name)(ctx))
Then in debug mode I can have a template that does this:
<div class="container content">
{{load "common.breadcrumbs"}}
<div class="row">
<div class="span12">
<div class="main">
{{load "product.edit.maindetails"}}
...
So we can then see a whole page split up into handlebars templates by the designers that's easy to add in the rest of the HBS code by the devs.