I'm trying to output json data with handlebars now everything is working except for the rooms price and i can not seem to find why it's not working.
In the handle bar tutorial there almost trying to do the same stuff
The json data:
[
{
"Id": 204448,
"Name": "Albus Hotel Amsterdam City Centre",
"ImageUrls": [],
"Volatility": 0,
"Address": "Vijzelstraat 49",
"Rooms": [
{
"Id": 0,
"Name": "Family Suite, 1 King Bed with Sofabed",
"IsRefundable": false,
"IsBreakfastIncluded": false,
"Price": 2437.02,
"Amenities": []
}
]
}
]
The html:
<ul>
{{#each}}
<li>
<div class="hotel_id">{{Id}}</div>
<div class="hotel_name">{{Name}}</div>
<div class="hotel_address">{{Address}}</div>
<div class="hotel_volatility">{{Volatility}}</div>
<ul>
{{#each Rooms}}
<li>
<div class="room_id">{{Price}}</div>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
Output:
204448
Albus Hotel Amsterdam City Centre
Vijzelstraat 49
0
Ember is quite strict with capitalization apparantly: Nested HandlebarsJS #each helpers with EmberJS not working. You could write a JSON postprocessor or preprocessor.
Naming conventions in Ember: http://emberjs.com/guides/concepts/naming-conventions/
Related
I am trying to learn ember following this course and I have the following controller
import Ember from 'ember';
export default Ember.Controller.extend({
title:'My Blog Post',
body:'Body of the post',
authors:['Author1', 'Author2', 'Author3'],
comments:[
{
name:'name 1',
comment:'comment 1'
},
{
name:'name 2',
comment:'comment 2'
},
{
name:'name 3',
comment:'comment 3'
}
]
});
And Template:
<h1>{{title}}</h1>
<p>{{body}}</p>
<p>
<strong>Authors:</strong>
{{#each authors}}
{{this}},
{{/each}}
</p>
<h4>Comments</h4>
<ul>
{{#each comments as c}}
<li><strong>{{name}}</strong> - {{comment}}</li>
{{/each}}
</ul>
And it has been generating this output:
My Blog Post
Body of the post
Authors: <my-app#controller:post::ember424>, <my-app#controller:post::ember424>, <my-app#controller:post::ember424>,
Comments
-
-
-
I double check everything and it is identical to the demo I am seem, I also try to use {{#each comments as |c|}}, {{each authors as author}} {{this.author}}, try to use {{c.name}}, also try {{this.name}}, {{this.c.name}}
Any ideas where I am going wrong?
Thanks in advance
Change your template file to this:
<h1>{{title}}</h1>
<p>{{body}}</p>
<p>
<strong>Authors:</strong>
{{#each authors as |author|}}
{{author}},
{{/each}}
</p>
<h4>Comments</h4>
<ul>
{{#each comments as |c|}}
<li><strong>{{c.name}}</strong> - {{c.comment}}</li>
{{/each}}
</ul>
i have a little issue which should be easy to fix, however i'm stuck.
I have the following situation the first zip shows a timeline post.
Each timeline post could have one comment or more comments or none at all.
I first tried to do it with jquery but got stuck as well.
So to make sure the right post gets the right comment/s i compare the id from the post_id and the org_post_id.
However the loop inside the template only occurs once and it's painfully inefficient.
I think a multi dic or tuple could work but i simply can't find an answer on how to fill it.
Would someone please help ?
Thanks =)
template:
<div class="col-md-12">
<section id="cd-timeline" class="cd-container">
{% for item in merged %}
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-success">
<i class="fa fa-tag"></i>
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>{{item.2}}</h2>
<p>{{item.6|safe}}</p>
{% if item.3 != '<p> </p>'%}
<p> <img src="{{item.2|safe}}"/> {% endif %} <p> {{item.4|safe}} {{item.5|safe}} </p> </p>
<span class="cd-date">Jan 14</span>
<div class="timeline-item-post">
<div class="timeline-options">
<i class="icon-like"></i> {{item.7}}
<button class="myEvent" id="{{item.9}}"><i class="icon-bubble"></i> {{item.8}} </button>
<i class="icon-share"></i> {{item.9}}
</div>
{% for items in comment_data %}
{% if item.0 == items.0 %}
<div class="timeline-comment">
<div class="timeline-comment-header">
<img src="assets/images/avatar2.png" alt="">
<p> {{items.1}}<small>3 hours ago</small></p>
</div>
<p class="timeline-comment-text">{{items.2}}</p>
</div>
{% endif %}
{% endfor %}
<textarea class="form-control" placeholder="Replay"></textarea>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
{% endfor %}
</section> <!-- cd-timeline -->
</div>
JSON snippet:
},
"id": "511524265623184_705647176210891",
"full_picture": "https://scontent.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/p720x720/11261437_705647176210891_75015310411838465_n.jpg?oh=f8542855ab46099ea38014411e712ae7&oe=561979D9",
"from": {
"id": "511524265623184",
"category_list": [
{
"name": "Bar",
"id": "110290705711626"
}
],
"name": "Roberto American Bar",
"category": "Bar"
},
"name": "Roberto American Bar",
"comments": {
"paging": {
"cursors": {
"before": "Mw==",
"after": "MQ=="
}
},
"summary": {
"total_count": 3,
"order": "ranked"
},
"data": [
{
"user_likes": false,
"created_time": "2015-05-20T20:05:31+0000",
"message": "Mint julep hat gewonnen \ud83c\udf8a\u2728\ud83d\udc90",
"id": "705647176210891_705801926195416",
"can_remove": true,
"like_count": 3,
"from": {
"id": "511524265623184",
"category_list": [
{
"name": "Bar",
"id": "110290705711626"
}
],
"name": "Roberto American Bar",
"category": "Bar"
}
},
{
"user_likes": false,
"created_time": "2015-05-20T14:24:16+0000",
"message": "eher ein mint julep; oder? Prost, auf alle f\u00e4lle!",
"id": "705647176210891_705654729543469",
"can_remove": true,
"like_count": 2,
"from": {
"name": "Gregor Tom Imhof",
"id": "991783270834753"
}
},
{
"user_likes": false,
"created_time": "2015-05-20T13:46:33+0000",
"message": "Prince of Wales, klassisch im Silberbecher.",
"id": "705647176210891_705648629544079",
"can_remove": true,
"like_count": 0,
"from": {
"name": "Klement Cabana",
"id": "10200893066687095"
}
}
]
}
}
VIEW:
for i in feed:
try:
comments.append(i['comments']['summary']['total_count'])
if i['comments']['data'] != []:
for n in i['comments']['data']:
org_post_ids, comment_id = n['id'].split('_')
org_post_id.append(org_post_ids)
comments_name.append(n['from']['name'])
comments_message.append(n['message'])
#comments_data.append(i['comments']['data'][0]['message'])
except KeyError:
comments.append('0')
show(org_post_id)
comment_data = zip(org_post_id, comments_name, comments_message)
for i in feed:
try:
likes.append(i['likes']['summary']['total_count'])
except KeyError:
likes.append('0')
for i in feed:
try:
picture.append(i['full_picture'])
except KeyError:
picture.append('<p> </p>')
for i in feed:
try:
little_des.append(i['name'])
except KeyError:
little_des.append('<p> </p>')
for i in feed:
try:
description.append(i['description'])
except KeyError:
description.append('<p> </p>')
for i in feed:
try:
message.append(i['message'])
except KeyError:
message.append('<p> </p>')
for i in feed:
name.append(i['from']['name'])
merged = zip(post_id ,profile, name, picture, little_des, description, message, likes, comments, shares)
I'm having an issue with data from my model not being bound. The category in the first each loop is bound fine. If I make a change to the input box, my model reflects that change.
The problem appears to be in the inner each loop. None of my changes in the inner loop are reflected in the model. If I change the inner loop to be just {{#each descriptions}} and use {{this}} instead of {{description}} my model still doesn't reflect the changes.
{{#each amenities}}
{{input type="text" value=category}}
<div><label>{{category}}</label></div>
<ul class="sortable-amenities" style="list-style-type: none;">
{{#each description in descriptions}}
<li>
<div>
<span class="handle glyphicon glyphicon-move pull-left" style="margin-top: 15px; margin-right: 10px;"></span>
{{input type="text" class="form-control input-amenities" name="amenity-description" placeholder="Amenity" value=description}}
<button style="padding-top: 3px;" {{action 'removeAmenity' description}}><span class="glyphicon glyphicon-remove" style=""></span></button>
</div>
</li>
{{/each}}
</ul>
{{/each}}
Sample 'amenities' I'm trying to loop through:
"amenities": [ { "category": "Featured", "_id": "53dc0aeede4be108724ce46a", "descriptions": [ "Floor Plans", "Pool", "Fitness Centre", "Air Conditioning", "Care Centre", "Pets" ] }, { "category": "Extra Features", "_id": "53dc0aeede4be108724ce469", "descriptions": [ "Three places", "Connections", "Appliances", "Breakfast", "Bright rooms", "Marble Flooring", "Ponds", "All Windows", "Organizers" ] }, { "category": "Community", "_id": "53dc0aeede4be108724ce468", "descriptions": [ "Picnic", "Basketball", "Volleyball", "Playground", "School", "Maintenance", "Customer", "Business" ] } ]
I've got a Component "comments"
<div class="comments">
<ul>
{{#each comment in comments}}
...
</ul>
</div>
which is present multiple times in the HTML:
Product A:
{{comments}}
Product B:
{{comments}}
etc.
If I set "comments" all Components render the comments. How can I tell Ember to set the Comments for a specific Product only? e.g. on headline click and Ajax Load.
JS Bin: http://jsbin.com/wafacojenahe/2/edit
Two issues with your code.
You didn't have any hierarchy (or sets of) in the data. This has a basic structure in place:
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
{
'name': 'Product A',
'comments': [
'Lorem ipsum',
'dolor sit amet'
]
},
{
'name': 'Product B',
'comments': [
"Another comment"
]
}
];
}
});
And the other issue is that components always need to be passed all data in.
<script type="text/x-handlebars" data-template-name="index">
{{#each product in model}}
<h1>{{product.name}}</h1>
{{comments-list model=product.comments}}
{{/each}}
</script>
<script type="text/x-handlebars" id="components/comments-list">
<ul>
{{#each model}}
<li>{{this}}</li>
{{/each}}
</ul>
</script>
JS Bin: http://jsbin.com/wafacojenahe/3/
My django based website will have 3 seperate menus. The items of first one are: contact, about, disclosures. The second one will have: terms and condtions, privacy policy, copyright. And items of main menu are: Home, link1, link2, link2.... The first two menus will have fixed items, and the items of last one may change. As I will be using forloop in the template, what is the best approach for creating those menus. The webpages will have just a title and content.
I like to use inclusion template tags for dynamic menus.
In my-app/templatetags/myappmenu.py, I have something like:
from django import template
register = template.Library()
#register.inclusion_tag('my-app/menu.html')
def myappmenu():
return [("label1", "link1"), ("label2", "link2")]
Then, in your template you can loop over the items and produce the menu in the format you desire (<p>, <ul>, etc.).
If you need to make items in the menu appear conditionally, you can add them to the list by checking permissions in the template tag; just pass the request or user object as argument to the template tag function.
You can stay DRY and just use django-menuware. It supports nested menus as well.
Install:
pip install django-menuware
# Add `menuware` to your settings.py**
# Add `MENUWARE_MENU` to your settings.py:**
Settings:
MENUWARE_MENU = {
"RIGHT_NAV_MENU": [
{ # Show `Login` to `unauthenticated` users ONLY
"name": "Login",
"url": "/login/",
"render_for_unauthenticated": True,
},
{ # Show `Logout` to `authenticated` users ONLY
"name": "Logout",
"url": "/logout/",
"render_for_authenticated": True,
},
{ # Show `Search` to all users
"name": "Search",
"url": "/search/",
"render_for_unauthenticated": True,
"render_for_authenticated": True,
},
],
"LEFT_NAV_MENU": [
{ # Show `Admin` to `superuser` ONLY
"name": "Admin",
"url": "admin:index", # Reversible
"render_for_authenticated": True,
"render_for_superuser": True,
},
{ # Show `Comment Admin` to `staff` users ONLY
"name": "Comment Admin",
"url": "/review/admin/",
"render_for_authenticated": True,
"render_for_staff": True,
},
]
Usage:
<!-- base.html -->
{% load menuware %}
<!DOCTYPE html>
<html>
<head><title>Django Menuware</title></head>
<body>
<!-- NAV BAR Start -->
{% get_menu "LEFT_NAV_MENU" as left_menu %}
<div style="float:left;">
{% for item in left_menu %}
<li class="{% if item.selected %} active {% endif %}">
{{item.name}}
</li>
{% endfor %}
</div>
{% get_menu "RIGHT_NAV_MENU" as right_menu %}
<div style="float:right;">
{% for item in right_menu %}
<li class="{% if item.selected %} active {% endif %}">
{{item.name}}
</li>
{% endfor %}
</div>
<!-- NAV BAR End -->
</body>
</html>
Minimally, you'd want to look at its Github README page before rolling your own.