I have the data:
priceGroups:
[
{
label: 'rate1",
price: 1.00,
numPeople: 1
},
{
label: 'rate 2",
price: 2.00,
numPeople: 2
},
{
label: 'rate 3",
price: 15.00,
numPeople: 4
},
];
and
labels:
[
'Solo',
'Duo',
'Trio'
'4 People',
'5 People
];
I want to be able to do this:
{{#priceGroups}}
{{for (a = 1; a <= {{this.numPeople}}; ++a)}}
<th>{{label[a]}}</th>
{{/for}}
{{/priceGroups}}
I have tried so much and nothing works.
Please help. It is important.
I think you can just use this:
{{#each priceGroups}}<th>{{label}}</th>{{/each}}
The {{#each priceGroups}} gets you an iteration of the priceGroups array and then each item of the array (which is an object) is presented to the template one after another so you can then reference the {{label}} property in that object.
You don't embed javascript directly into handlerbars templates like you're trying to do.
Related
I figure that this is some timezone/UTC issue - but I can't quite figure it out.
I have setup Netlify CMS on my Gatsby website using the following config.yml:
backend:
name: git-gateway
branch: master
publish_mode: editorial_workflow
media_folder: src/images/uploads
public_folder: /uploads
collections:
- name: "tourInfo"
label: "Tour Info"
files:
- file: "static/json/tours.json"
label: "Tours"
name: "tours"
fields:
- {label: "Tour", name: tour, widget: list, fields: [
{label: "Date", name: date, widget: "date"},
{label: "Spaces", name: spaces, widget: "number"},
{label: "Booked", name: booked, widget: "number", required: false} ]}
I've used this to create tour dates but on doing so there's inconsistencies:
On selecting a date through the CMS the date appears correct as above.
But then the date is saved as:
This is obviously inconsistent with the date which I input.
This behaviour is also consistent across all entered dates fetched via Gatsby on the front end:
[
{
"date":"2019-04-03T23:35:50.291Z",
"spaces":6,
"booked":6
},
{
"date":"2019-04-17T23:36:08.718Z",
"spaces":6,
"booked":null
},
{
"date":"2019-05-01T23:36:19.622Z",
"spaces":6,
"booked":null
},
{
"date":"2019-05-15T23:36:33.206Z",
"spaces":6,
"booked":null
},
{
"date":"2019-06-05T23:36:49.265Z",
"spaces":6,
"booked":null
},
{
"date":"2019-06-19T23:37:09.924Z",
"spaces":6,
"booked":6
}
]
They're all a day out.
I suspect this is some type of timezone issue? My locale is currently on BST.
Surely when working with the date widget time shouldn't matter - why does Netlify even have to save a time? I'm only inputting a date.
How can I rectify this? So when I enter 2019/04/04 I get 2019/04/04?
There is the ability to set the format for date in NetlifyCMS.
Example
{label: "Date", name: date, widget: "date", dateFormat: "YYYY-MM-DD", "format": "YYYY-MM-DD"},
dateFormat is the widget output
format is the data output
These formats are moment based formatting.
See Docs
We can do this to disable the the date calendar only keeps the time selector:
Inside config.yml file, just need to write down something commands like this:
name: 'end_time'
label: 'End Time'
widget: 'datetime'
format: 'HH:mm A'
dateFormat: false
timeFormat: true
It will looks like this:
I am trying to build an array of data returned from a third party API, and display it using the Highcharts map module.
I've done so with the charts module, using line and pie charts both with not much difficulty. Now that I've moved onto maps, I seem to be running into a bit of difficulty. It was quite clear from the examples provided how the data should be structured to be properly read by Highcharts.
When it comes to the maps module, the data structure is not clear at all. How would I structure my data to pass into my Highcharts map???
[ 'US' , 'United States' , 32 ] , [ 'CA' , 'Canada' , 100 ]
If I use the provided :
jQuery.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
console.log(data);
// Initiate the chart
jQuery('#geo_map').highcharts('Map', {
title : {
text : 'Campaign Link Clicks Around The World'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
},
}],
credits: {
enabled: false
},
});
});
});
It works. But I can't seem to figure out how to pass in my data. I thought it was as simple as
[ 'Abbreviation' , 'Name' , Value ] , [ 'Abbreviation' , 'Name' , Value ]
but clearly not. The documentation isn't very clear on data structure.
Thanks.
Basically I want to this: In Mustache templating is there an elegant way of expressing a comma separated list without the trailing comma? in a Ractive template.
For the object
{
"items": [
{"name": "red"},
{"name": "green"},
{"name": "blue"}
]
}
I want to produce "red, green, blue"
I want to know if I am at the last item, so I can know whether to print the separator. Something like:
{{#items:i}}{{name}} {{#i.is_last}},{{/i}}{{/items}}
Can't easily test this right now, but wouldn't something like the following work?
{{#items:i}}
{{name}} {{ i < (items.length-1) ? "," : "" }}
{{/items}}
Can confirm that Stephen Thomas' answer works. Another option would be to join the array items like so:
ractive = new Ractive({
el: 'body',
template: '{{ items.map( getName ).join( ", " ) }}',
data: {
items: [{ name: 'red' }, { name: 'green' }, { name: 'blue' }],
getName: function ( item ) {
return item.name;
}
}
});
I actually wanted a solution that would allow me to put something more complicated instead of a comma, say, a DOM element. I figured out (another) method that works.
{{#items:i}}
{{name}}{{#(i<(items.length-1))}}, {{/end}}
{{/items}}
Recently #index and #last magic variables are introduced, so the example now becomes more readable:
{{#items}}
{{.name}}{{##index !== #last}}, {{/}}
{{/}}
In Handlebars.js, how can I use #index to subscript into another parallel array in the object I am passing to a template?
For example, say I have an object set up like the following:
var table = {
cols : [
{ name: "Column 1" },
{ name: "Column 2" },
{ name: "Column 3", highlighted: true }
],
rows : [
{
label: "Row 1",
data: [
{ val: 5 },
{ val: 3 },
{ val: 8 }
]
},
{
label: "Row 2",
data: [
{ val: 8 },
{ val: 4 },
{ val: 0 }
]
}
]
};
I need to be able to use the #index from an {{#each rows}}{{#each data}} loop to check if the column is highlighted to apply a style to cells in the column, but Handlebars.js does not appear to allow using #index in a subscript operator.
E.g.
{{#index}} <!-- Index of current rows.data is 2. -->
{{#if ../../cols.[#index].highlighted }}
<!-- Never Executed -->
{{/if}}
{{#if ../../cols.[2].highlighted }}
<!-- Executes -->
{{/if}}
Is this not supported? Am I doing something wrong? How can I get this to work easily?
I posted an example on jsfiddle.net.
#key and #index behave specially, not as variables. So, even when you can use myvar.[123] you cannot use myvar.[#key] even though #key is 123. (At least, as of Handlebars 1.3.0)
There are two solutions. The first is to write your own handlebars helper, that takes both arrays/objects. The second is to restructure your data, i.e. merge your two parallel arrays.
As an example of the latter approach, if you have these two arrays:
var X={
cat:"meow",
sheep:"baaa"
};
var Y={
cat:3,
sheep:5
};
Then you could do:
var Z={};
for(var ix in X){
Z[ix]={X:X[ix],Y:Y[ix]};
}
And then pass Z to your handlebars template:
myTemplate({animals:Z});
which might look like this:
{{#each animals}}
The {{#key}} goes {{this.X}}; we have {{this.Y}} of them.
{{/each}}
I'd like to create a simple app that shows me a list of the latest stories from my favourite news sites using Sencha Touch 2 and the RSS feeds, of course.
How do I get data from an rss-feed and then display it as a list, showing title, author, date and content?
I can get a list of the latest news stories going, but I can only manage to display each item title/headline, not the author, date, snippet etc. Here's my code:
1 model, 1 store, 1 view, 1 app.js:
//The store
Ext.define("NewsApp.store.EbStore", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP", "Ext.dataview.List" ],
config: {
model: "NewsApp.model.NewsListModel",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://feeds.feedburner.com/newsapp_pol',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
//The Model
Ext.define("NewsApp.model.NewsListModel", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'title', type: 'auto'},
{name: 'author', type: 'auto'},
]
}
});
//The view
Ext.define("NewsApp.view.NewsList", {
extend: "Ext.Container",
requires: "Ext.Toolbar",
alias: "widget.newslistview",
config: {
layout: {
type: 'fit'
},
items: [{
xtype: "toolbar",
title: "Danske Nyheder",
docked: "top",
items: [
{
xtype: 'spacer'
},
{
xtype: "button",
text: "Indstillinger",
ui: "action",
id: "settingsButton",
iconMask: true,
iconCls: 'settings'
},
{
xtype: "button",
text: "Refresh",
ui: "action",
id: "refreshButton",
iconMask: true,
iconCls: 'refresh'
}
]
},
{
xtype: "list",
store: "EbStore",
itemId:"EbList",
onItemDisclosure: true,
itemTpl: '{title}'
}
],
}
});
// And the app.js just for kicks
Ext.application({
name: "NewsApp",
models: ["NewsListModel"],
stores: ["EbStore"],
views: ["NewsList"],
launch: function () {
console.log("App starts");
var newsListView = {
xtype: "newslistview"
};
Ext.Viewport.add([newsListView]);
}
});
With this code, I can display the titles of the rss items nicely. But if I change the {title} to, say, {author}, the list items are created in my view, but without any content whatsoever. The RSS that I'm trying to read uses normal standards, I think: http://feeds.feedburner.com/newsapp_pol
So how do I display more than just the title and acces the rest of the rss?
I guess it boils to my not understanding what data is being captured in the proxy-code or how or in what format exactly.
Can anybody help? :-)
I have checked out these two examples of Sencha Touch RSS readers, and both are excellent, except that the code is way too advanced for me to understand:
http://www.sencha.com/apps/rssreader/
https://github.com/AndreaCammarata/FeedBurner-RSS-Reader
Troels,
If you want to look at the data response of your google feed, I suggest you take a peek at the json data with a json beautifier to make it easier to read. First paste your google feed url into the browser's address bar. Copy the resulting json response - and paste it into the beautifier. That will give you a structured view of the data fields in the response data.
When i tried it, the first entry looked like this:
"title": "Over 50 såret under kampe i Kosovo",
"link": "http://politiken.dk/udland/ECE1672568/over-50-saaret-under-kampe-i-kosovo/",
"author": "",
"publishedDate": "Thu, 28 Jun 2012 12:09:18 -0700",
"contentSnippet": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"content": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"categories": []
I noticed that the "author" field is empty on all entries, which may explain why you get an empty list.
That should help you understand the data structure in the feed and create matching references in your code.
Cheers,
Rasmus