posts.hbs
I want to add a suffix to the "onePost.id" value and it has to be done in this file.
<br>
<h2> Blog Posts </h2>
<ul>
{{#each model as |onePost index|}}
<li id = {{index}}>{{onePost.title}} {{edit-post id = onePost.id + 'suffix' }}
</li><br>
{{/each}}
</ul>
{{add-new-post}}
Use the concat template helper:
<li id={{index}}>{{onePost.title}} {{edit-post id=(concat onePost.id 'suffix')}}
Related
I am trying to pass the index value from posts.hbs to the delete-post.hbs and then from delete-post.hbs to my delete-post.js function.
posts.hbs
<br>
<h2> Blog Posts </h2>
<ul>
{{#each model as |onePost index|}}
<li id = {{index}}>{{onePost.title}} {{delete-post}}
</li><br>
{{/each}}
</ul>
{{add-new-post}}
delete-post.hbs
<a class="ui red button" {{action 'deletePost' parentNode.id `}}>Delete</a>`
delete-post.js
import Component from '#ember/component';
export default Component.extend
({
actions:
{
deletePost(input)
{
alert(input);
}
}
});
You can pass the parameter by = operator like {{component-name componentProperty=outerProperty. In your case:
{{#each model as |onePost index|}}
<li id = {{index}}>{{onePost.title}} {{delete-post parentNodeId=index}}
</li><br>
{{/each}}
Also, you should change parentNode.id to parentNodeId in your delete-post.hbs
<ul class="products-grid">
<li class="item">
<div class="product-block">
<div class="product-block-inner">
<img src="#/producta.jpg">
<h2 class="product-name">Product A</h2>
<div class="price-box">
<span class="regular-price" id="#">
<span class="price">Rs 1,849</span>
</span>
</div>
</div>
</div>
</li>
<li class="item">
<div class="product-block">
<div class="product-block-inner">
<img src="#/productb.jpg">
<h2 class="product-name">Product B</h2>
<div class="price-box">
<span class="regular-price" id="#">
<span class="price">Rs 1,849</span>
</span>
</div>
</div>
</div>
</li>
</ul>
I am at this moment scraping the item in a loop.
products = response.xpath('//ul[#class="products-grid"]//li//div[#class="product-block"]//div[#class="product-block-inner"]').extract()
After getting the product-block-inner node, I save it into products and then I will have to loop like
for product in products:
// parse the div.product-block-inner further deep down
// to get name, price, image etc
// and save it to a dict and yeild
pass
Is this possible that i get text, href for all div.product-block-inner in the final list without looping
Yes, but it's very confusing, for example you could try this:
products = response.xpath(
'//ul[#class="products-grid"]//li//div[#class="product-block"]//div[#class="product-block-inner"]'
).css(
'.product-name a::attr(href), .product-name a::text, .price::text'
).extract()
but I would suggest to always loop (btw, why do you call extract() when you assign it to products?)
products = response.xpath(
'//ul[#class="products-grid"]//li//div[#class="product-block"]//div[#class="product-block-inner"]'
)
for product in products:
yield {'name': product.css('.product-name a::text').extract_first()
'url': product.css('.product-name a::attr(href)').extract_first()
'price': product.css('.price::text').extract_first()}
(I've used css selectors in this case because the equivalent xpaths are longer, but the same can also be achieved using xpath)
I'm using ember.js with handlebars, and it seems external URL cannot be reached without a script. I put a link to www.google.com to test and it never fires! Is there something I am missing on?
<script type="text/x-handlebars" data-template-name="subusers">
<div class="click-nav" {{action 'toggleDdSubusers'}}>
<ul class="no-js" >
<li>
<a class="clicker">
{{render 'currentsubuser'}}
</a>
<ul class="filter-options">
{{#each subuser in model}}
{{#unless (equals subuser.id currentSubuserInfos.id)}}
<li>
<a href="http://www.google.com">
<span class="profileimg">{{{subuser.profileImage}}}</span>{{subuser.name}}<span class="numbers"> ({{subuser.openedConvCount}})</span>
</a>
</li>
{{/unless}}
{{/each}}
</ul>
</li>
</ul>
</div>
</script>
I still don't know why I got this behavior on my app. What I did to solve my problem is I put an action on my li and send the wanted redirect URL as a function parameter.
In this action, I simply manually redirect with : window.location.href = paramUrl.
I'm trying to do a list of product items and make them so when you click the image or title it will show a single page/template with the more info, etc.
But, when ever I use {{#each product in model}} the link-to just returns an undefined.
Heres what I have
App.Router.map(function(){
this.route('about', { path: '/aboutus' } );
this.resource('products');
this.resource('product', { path: '/products/:title' } );
this.resource('contacts');
});
App.ProductsRoute = Ember.Route.extend ({
model: function(){
return App.PRODUCTS;
}
});
// Logging out Params from the Route
App.ProductRoute = Ember.Route.extend ({
model: function(params){
return App.PRODUCTS.findBy('title', params.title);
}
});
App.PRODUCTS = [
{
title: 'Flint',
price: 99,
description: 'Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.',
isOnSale: true,
image: 'images/flint.png'
},
{
title: 'Kindling',
price: 249,
description: 'Easily combustible small sticks or twigs used for starting a fire.',
isOnSale: false,
image: 'images/kindling.png'
}
];
when I use this method {{#each product in model}} i get undefined
<script type='text/x-handlebars' data-template-name='products'>
<h1>Products</h1>
<ul class="list-unstyled col-md-8">
{{#each product in model}}
<li class='row m-b'>
{{#link-to 'product' this }}<img {{bind-attr src='product.image'}} class='img-thumbnail col-md-5' alt='product-image' />{{/link-to}}
<div class="col-md-7">
<h2>{{product.title}}</h2>
<p class="product-description">{{product.description}}</p>
<p><button class="btn btn-success">Buy for ${{product.price}}</button></p>
</div>
</li>
{{/each}}
</ul>
</script>
<script type='text/x-handlebars' data-template-name='product'>
<div class="row">
<div class="col-md-7">
<h2>{{title}}</h2>
<p>{{description}}</p>
<p>Buy for ${{price}}</p>
</div>
<div class="col-md-5">
<img {{bind-attr src='image'}} class='img-thumbnail img-rounded' />
</div>
</div>
</script>
but when I use just {{#each}} it returns normally BUT it warns me this: DEPRECATION: Using the context switching form of {{each}} is deprecated. Please use the keyword form ({{#each foo in bar}}) instead.
<script type='text/x-handlebars' data-template-name='products'>
<h1>Products</h1>
<ul class="list-unstyled col-md-8">
{{#each}}
<li class='row m-b'>
{{#link-to 'product' this }}<img {{bind-attr src='image'}} class='img-thumbnail col-md-5' alt='product-image' />{{/link-to}}
<div class="col-md-7">
<h2>{{title}}</h2>
<p class="product-description">{{description}}</p>
<p><button class="btn btn-success">Buy for ${{price}}</button></p>
</div>
</li>
{{/each}}
</ul>
</script>
which one should I use and how do I fix the undefined error? I'm guessing it has to do with the App.ProductRoute but can't figure it out, still new to ember :l
You should use
{{#each product in model}}
and to fix your undefined use the following:
{{#link-to 'product' product }} ...title... {{/link-to}}
When you use {{#each}} the context of this gets switched to each item in the loop, which is sometimes confusing and is being deprecated. When you use the {{#each product in model}} version, the context of each item through the loop is product and this remains whatever it was you entered each
EDIT: Updated code and explanation
Here's the application.html.erb:
<div class="container">
<div class="row">
{{outlet}}
</div>
<hr>
<footer>
<p>© 2013</p>
</footer>
</div>
And then here's the countries.hbs file I'm trying to convert to emblem.
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Countries</li>
{{#each model}}
<li>
{{#linkTo "country" this}}{{title}}{{/linkTo}}
</li>
{{/each}}
</ul>
</div>
</div>
<div class='span9'>
{{outlet}}
</div>
Based on the Emblem docs, this was as close as I could get, and I've tried variations, but I couldn't get it to work. What's the syntax?
.span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
li = linkTo "country" #{title}
.span9
{{outlet}}
Part of the problem, I know, is that emblem doesn't seem to have {{outlet}}, so I know those last 2 lines won't work.
I'm using the better_errors Rails gem, and here's the error:
Pre compilation failed for: .span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
So is there something with the each loop?
This should work for you.
.span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
li
linkTo "country"
= title
Cheers
There are a few syntax errors in your code. This should work:
.span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
li
= link-to "country" | #{title}
.span9
= outlet