Is there a way to define a custom Handlebars helper with Mandrill? Say that I've got an object and the currency is in cents.
"products": [
{
"sku": "hdrPhotos",
"price": 19000,
"title": "Unlimited HDR Photography"
},
{
"sku": "panos",
"price": 2500,
"title": "Panoramas / Virtuals"
},
{
"sku": "fullVideo",
"price": 43000,
"title": "Full Video"
},
{
"sku": "aerialDaytimePhotos",
"price": 17500,
"title": "Aerial Daytime Photography"
},
]
I've got this template:
<!-- BEGIN PRODUCT LOOP // -->
{{#each products}}
<tr class="item">
<td valign="top" class="textContent">
<h4 class="itemName">{{title}}</h4>
<span class="contentSecondary">${{toCurrency price}}</span>
<br/>
<span class="contentSecondary sku"><em>{{sku}}</em></span>
<br/>
</td>
</tr>
{{/each}}
I want to take price, which is in cents, and write a custom helper toCurrency that simply divides it by 100.
Custom helpers are easy enough to do in standard Handlebars, but is it possible with Mandrill's utilization of it?
According to the documentation this isn't possible :
"Use Handlebars regardless of whether you're using templates in Mandrill. We'll cover the basics of Handlebars, helpers implemented specifically for Mandrill, and some deviations from and additions to standard Handlebars."
Reference: https://mandrill.zendesk.com/hc/en-us/articles/205582537-Using-Handlebars-for-Dynamic-Content#using-helpers
There are not even all helpers from handlebar.
Related
I need to create a dynamic form with multiple nested items. I've found this example
but i'm not sure it's doing deep recursive since once i've tried to add more levels of nested items - the ui brakes down.
Here is the default json structure with my attempts :
{
key: "common",
title: "main fields",
group: [
{
key: "createdAt",
title: "Create Date",
type: "date"
},
// group:[{
// key: "foo",
// title: "Foo",
// type: "select",
// },
// {
// key: "goo",
// title: "Goo",
// type: "input",
// },
// ]
]
},
So as you can see under "common" - i've added 2 more levels of groups - the first group works fine - but the nested group with key "foo" and "goo" it's working.
I'm pretty sure the problem is in the template / markup
<form [formGroup]="filterForm" class="filter-form">
<ng-template #recursiveList let-filterFields let-fromGroup="fromGroup">
<ng-container *ngFor="let item of filterFields">
<ng-container *ngIf="item.group; else default;">
// in this area i'm not sure it's iterate over deeper nesting...
<p>{{item.key}} </p>
<div [formGroupName]="item.key">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit:
item.group, fromGroup: {name: item.key}, isChild:true }"></ng-container>
</div>
</ng-container>
<ng-template #default>
<div class="form-group" [formGroupName]="fromGroup.name">
<input [type]="item.type" [formControlName]="item.key"
[placeholder]="item.title" [name]="item.key" />
</div>
</ng-template>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields
}">.
From my understanding, there are two issues in the example you provided:
The data structure.
The template.
Data Structure
These are the interfaces I understand from your example:
interface Base {
key: string;
title: string;
}
interface Field extends Base {
type: 'select' | 'input' | 'date' | ...
}
interface Group extends Base {
group: Array<Field | Group>
}
So the JSON example you provided should look something like this:
{
"key": "common",
"title": "main fields",
"group": [
{
"key": "createdAt",
"title": "Create Date",
"type": "date"
},
{
"key": "test",
"title": "Test"
"group": [
{
"key": "foo",
"title": "Foo",
"type": "select"
},
{
"key": "goo",
"title": "Goo",
"type": "input"
}
]
}
]
}
Template
Let's look at a very simplified version of the form:
<form [formGroup]="filterForm">
<ng-container formGroupName="common">
<ng-container *ngTemplateOutlet="control;
context:{ controlName: 'foo', group: 'test' }">
</ng-container>
</ng-container>
<ng-template #control let-group="group" let-controlName="controlName">
<div class="col-md-3">
<div class="form-group" [formGroupName]="group">
<input type="input" [formControlName]="controlName" />
</div>
</div>
</ng-template>
</form>
The code won't work, why? Think about the ng-template as a function. If you want it to know about the formGroupName="common" it needs to be declared within that scope. What matters is the declaration context and not the invocation context, just like regular functions.
This is the working version of the above example:
<form [formGroup]="filterForm">
<ng-container formGroupName="common">
<ng-container *ngTemplateOutlet="control;
context:{ controlName: 'foo', group: 'test' }">
</ng-container>
<ng-template #control let-group="group" let-controlName="controlName">
<div class="col-md-3">
<div class="form-group" [formGroupName]="group">
<input type="input" [formControlName]="controlName" />
</div>
</div>
</ng-template>
</ng-container>
</form>
Things get trickier when you have nested and you need to use recursion.
That's why I think that the approach of using the formGroupName and formControlName directives in this scenario makes things more complicated than they are.
I suggest passing the form control directly into the input by providing the right path to it.
Here is a working example of the idea based on your original example.
I have the following JSON data:
{
"name": "faded",
"artist": "alan walker",
"color": "faded"
},
{
"name": "i love you",
"artist": "omfg",
"color": "143"
},
{
"name": "closer",
"artist": "the chainsmokers",
"color": "c105e2"
},
{
"name": "roses",
"artist": "the chainsmokers",
"color": "205e2"
}
I'm converting hex codes into background-colors, however some of these will not work since colors needs be either a 6-digit (#ffffff) or 3-digit number (#fff).
A solution would be to add 0 before numbers which are 2,4 or 5 digits only, so "205e2" would come out as "#0205e2". I'd also like to apply this JSON data to each div:
<div style="background-color: #000;"> <!-- background-color here -->
<h1 id="name"></h1> <!-- name goes here -->
<h2 id="artist"></h2> <!-- artist goes here -->
<h3 id="hex">#000000</h3><!-- color text goes here -->
<div class="content">
<button>Like</button>
<button>Copy</button>
</div>
What would be the possible way to code this?
I have got the following data (sample):
"data": {
"eventsHeading": "Upcoming events",
"eventsToBeDisplayed": 3,
"allEventLinkText": "See all events",
"eventsList": [
{
"eventDate": "22/12/2015",
"eventTitle": "EVENT INFO 1"
},
{
"eventDate": "22/12/2015",
"eventTitle": "EVENT INFO 2"
},
{
"eventDate": "14/01/2016",
"eventTitle": "EVENT INFO 3"
},
{
"eventDate": "14/01/2016",
"eventTitle": "EVENT INFO 4"
}
]
}
And I have something like this:
{{#eventsList}}
<tr>
<td class="date-column">{{eventDate}}</td>
<td class="text-link truncate-text"><span decorator="tooltip:{{eventTitle}}" tabindex="0">{{eventTitle}}</span>
</tr>
{{/}}
And now it will just print all the data for eventList. What I want to do is add a for loop like
i=0;i<={{eventsToBeDisplayed}};i++
so only 3 of the data will show.
What do you think is the best approach for this?
You can add an indexer to the loop and then conditionally filter inside the loop:
{{#eventsList:i}}
{{# i < eventsToDisplay}}
<tr>
<td class="date-column">{{eventDate}}</td>
<td class="text-link truncate-text"><span decorator="tooltip:{{eventTitle}}" tabindex="0">{{eventTitle}}</span>
</tr>
{{/}}
{{/}}
You could also use computed properties - I like to do this because it seems a little more explicit than a loop where the entire body is wrapped in an if, you can reuse it more easily, you can do calculations or checks against that subset of data in other areas, etc...
template
{{#topEvents}}
<tr>...</tr>
{{/}}
script (computed goes on same level as data)
computed: {
topEvents: function(){
return this.get('eventsToDisplay').slice(0, this.get('eventsToBeDisplayed'));
}
}
I want to do a mobile webpage, which in the middle of the webpage, I will be able to swipe my finger to the left/right and scroll between images there.
a photo to demonstrate:
I wanna be able to swipe between the censored images with my finger.
How do I do such a thing?
Thanks in advance!
You're looking for a cover-flow like thing. This might guide you in the proper direction : http://andrebrov.net/dev/carousel/
Source Link : http://forum.jquery.com/topic/jquery-mobile-carousel-widget
GITHUB Link : https://github.com/andrebrov/jqm.carousel
Here's how the HTML would look like :
<div style="height:460px;width:300px;">
<div id="carousel" class="carousel">
<div id="carousel_scrollpane" class="carousel-content">
<div id="carousel_content" class="carousel-content-scroller"></div>
</div>
<div id="carousel_nav" class="carousel-nav">
<div id="carousel_mid" class="carousel-mid"></div>
</div>
</div>
</div>
Then, the initialisation would go this way :
var carousel = new $.widgets.Carousel({
uuid: "carousel",
args: {
"scrollInterval": 600,
"itemWidth": 290
},
value: [{
"title": "Tron.Legacy",
"image": "images/1.jpg"
}, {
"title": "Yogi Bear",
"image": "images/2.jpg"
}, {
"title": "The Chronicles of Narnia: The Voyage of the Dawn Treader",
"image": "images/3.jpg"
}, {
"title": "The Fighter",
"image": "images/4.jpg"
}, {
"title": "Tangled",
"image": "images/5.jpg"
}]
});
Hope this helps!
I have a handlebars template
<tbody id="userInfoDetails">
<script id="some-template" type="text/x-handlebars-template">
{{#each usersInfo}}
<tr>
<td class="username">{{screenname}}</td>
<td class="realName">{{realname}}</td>
<td class="email">{{email}}</td>
</tr>
{{/each}}
</script>
</tbody>
My JSON context :
var response = [{
"usersInfo": [{
"id": 0,
"email": "user0#live.com",
"realname": "user0",
"screenname": "mash0",
"mention": "false"
},
{
"id": 1,
"email": "user1#live.com",
"realname": "user1",
"screenname": "mash1",
"mention": "false"
},
{
"id": 2,
"email": "user2#live.com",
"realname": "user2",
"screenname": "mash2",
"mention": "false"
} ]
}]
and the render function:
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$("#userInfoDetails").html(template(response));
But I dont get the expected html for rendering. In fact with this code, template(response) returns empty.
Any suggestions.?
Answered in https://stackoverflow.com/a/7344483/1342296.
In your case. Either change the JSON response server side, or template only the first object.
$("#userInfoDetails").html(template(response[0]));