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
Related
I have a component defined like so:
<div class="col-sm-4 col-md-2">
<div class="thumbnail">
<img src="assets/images/{{image}}">
<div class="caption">
<h5>{{#link-to 'games.game' this}}{{title}}{{/link-to}}</h5>
</div>
</div>
</div>
And I am using it like so:
{{#each model as |game|}}
{{game-details-small title=game.title image=game.image id=game.id}}
{{/each}}
I kind of accidentally got the link-to helper to work by passing in id=game.id as a property. However, if I remove that the link loses the reference to the id. I'm trying to find documentation on how passing in the id makes this reference the id correctly, but I can't find it. Any suggestions, links, or explanation would be helpful.
There is no this inside components, you have to pass the context, in your case you would pass the game:
{{#each model as |game|}}
{{game-details-small model=game}}
{{/each}}
And the template becomes:
<div class="col-sm-4 col-md-2">
<div class="thumbnail">
<img src="assets/images/{{model.image}}">
<div class="caption">
<h5>{{link-to model.title 'games.game' model.id}}</h5>
</div>
</div>
</div>
I have my index page where i show a list of invoices where the user can click to create and edit them, i am using DS.FixtureAdapter in my adapter
The problem is that i get this error
Error while processing route: index Assertion Failed: Unable to find fixtures for model
If in my model i reopen the class like this, everything works fine
Invoice.reopenClass({
FIXTURES: [
{
id : '1',
name : 'Invoice num 1',
transactions: [1]
}
]
});
So i assume that i am doing something wrong in my template where i am saying if there are not invoices show me "no invoices..."
<div class="row">
<div class="large-6 columns">
<h3>View Invoices</h3>
<ul class="invoices-listing">
{{#each invoice in model}}
<li>
{{#link-to "invoices.show" invoice}}
{{invoice.name}}
{{/link-to}}
</li>
{{else}}
<li>no invoices… :(</li>
{{/each}}
</ul>
</div>
<div class="large-6 columns">
<h3>Edit Invoices</h3>
<ul class="invoices-listing">
{{#each invoice in model}}
<li>
{{#link-to "invoices.edit" invoice}}
{{invoice.name}}
{{/link-to}}
</li>
{{else}}
<li>no invoices… :(</li>
{{/each}}
</ul>
</div>
<div class="large-12 columns">
Invoices: {{InvoicesCount}}
</div>
<div class="large-12 columns">
{{#link-to "Invoices.create" class="create-btn"}} Add Invoice {{/link-to}}
</div>
</div>
Routes Index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.find('fattura');
}
});
This looks like a problem only when i start the ember server because for instance if i start creating and deleting invoices and i want to delete all of them the index page shows correctly "no invoices..."
You'll always need to set up fixtures even if you want to start with no records. Ember still needs somewhere to go look for them and will error if you don't at least have a fixture with an empty array.
So you can just start your project with this in your model:
Invoice.reopenClass({
FIXTURES: []
});
Here is the app i am learning to build.
categories has many products.
Accordion of category - heading and products as body is in categories template
router.js
MyApp.Router.map(function () {
this.resource('categories', {path: '/'}, function () {
this.resource('category', { path: '/:category_id'}, function () {
this.resource('product', {
path: '/:product_id'
});
});
});
});
My categories handlebar
<div class="panel-group" id="accordion1">
{{#each category in model}}
{{view MyApp.AccordionView context=category}}
{{/each}}
</div>
and my accordion view
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
{{#view MyApp.AccordionTitleView }}{{name}} {{/view}}
</h4>
</div>
<div {{bind-attr id=id}}class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tbody>
{{#each products itemController="product"}}
<tr><td>{{#link-to 'category.product' category content }}{{content.name}}{{/link-to}}</td></tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
U P D A T E S
my issue got resolved by changing
{{#link-to 'category.product' category content }} in my accordion view to
{{#link-to product' category content }}
but as per ember guides
Ember guides
I can pass two model like this sample code
<p>
{{#link-to 'photo.comment' 5 primaryComment}}
Main Comment for the Next Photo
{{/link-to}}
</p>
i dont understand if its because my router hierarchy. but in any case i think it should give some nice error. I an a noob wonder what experts think on this
You have to use 'product' in your link-to instead of 'category.product'.
This is because in MyApp.Router.map() you made product a resource, not a route.
Resources' route names are unprefixed, whereas routes' route names are prefixed with their parent resource.
See http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources
I have a Ember.js page that displays a table of items and shows details of one of the items when it is selected. The controller looks like this:
CV.IndexController = Ember.ArrayController.extend({
itemController: "CurrVitae",
selectedCurrVitae: false,
actions: {
selectCurrVitae: function(currVitae) {
this.set('selectedCurrVitae', currVitae)
}
}
});
And the index controller is used in a template like this:
<div class="container">
<div class="curr-vitae-list">
{{#each curr_vitae in controller}}
<div class="curr-vitae-item row">
<div class="col-sm-2" {{action selectCurrVitae curr_vitae}}>
{{curr_vitae.name}}
</div>
<div class="col-sm-2">
<!-- NOTE: This method is defined on the item
controller (not the model) so the itemController is
available at this point. -->
{{curr_vitae.createdAtDisplay}}
</div>
<div class="col-sm-7">
<div class="embedded-cell">
{{curr_vitae.summary}}
</div>
<div class="embedded-cell">
{{curr_vitae.objective}}
</div>
</div>
</div>
{{/each}}
</div>
<div class="curr-vitae-view">
<h2>Details</h2>
<!-- EDIT: I have tried setting this
as {{#if selectedCurrVitae itemController="currVitae" }}
to match the way the #each handles item controllers but that did
not seem to work -->
{{#if selectedCurrVitae }}
<!-- NOTE: Down here, however, the item controller is not available
so I can't use methods defined on the item controller for the
currently selected instance. -->
{{ partial "cv_index_details" }}
{{/if}}
</div>
</div>
Question: The problem I'm running in to is that the itemController I've set in the index controller is not available when rendering the selectedCurrVitae in the cv_index_details.
More details:
Specifically, in the partial I want to reuse a editor component (taken from Noel Rappin's Ember.js book). So if the cv_index_details partial looks like this:
<h3 class="selected_cv">{{selectedCurrVitae.name}}</h3>
<div class="row selected_cv_summary">
<h4>Summary</h4>
{{block-editor emberObject=selectedCurrVitae propName="summary" action="itemChanged"}}
</div>
<div class="row selected_cv_experiences">
<h4>Experiences</h4>
{{#each experience in selectedCurrVitae.experiences itemController="experience"}}
{{ partial "experience_detail" }}
{{/each}}
</div>
So in this template, the itemChanged action is not found for the selectedCurrVitae instance. However, I use the same block-editor component for the experience instance and that works correctly; the itemChanged action defined on the ExperienceController is found.
selectedCurrVitae is outside of the itemController, the itemController is only applied inside the each (on each item, hence the name).
Probably the easiest way to accomplish this will be to reuse the item controller and use render.
Template
{{#if selectedCurrVitae }}
{{ render "cv_index_details" }}
{{/if}}
Controller
CV.CvIndexDetailsController = CV.CurrVitaeController.extend();
Or
Template
{{#if selectedCurrVitae }}
{{ render "currVitae" }}
{{/if}}
View
CV.CurrVitaeView = Ember.View.extend({
templateName: 'cv_index_details'
});
0 release!
I am having a weird problem rendering CSS under Ember.js. It is weird because the just works fine after manually refreshing the page, and in plain HTML without Ember. I have tried different browsers and different CSS libraries and all the same.
I just want to render tabs inside a handlebars template, I have tried both Zurb Foundation sections and jQuery-ui tabs and both work only after manual page refresh.
I have tried to reproduce the problem with JSBin but it didn't work. I am using the example code from both libraries to do this.
Here is my HTML with Zurb Foundation 4.3: (referencing js and css libraries omitted for brevity)
<html>
<body>
<script type="text/x-handlebars">
<nav class="top-bar" data-options="is_hover=false">
<ul class="title-area">
<li class="name">
<h1>Main</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left show-on-small">
<li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
</ul>
<ul class="left">
<li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
</ul>
</section>
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="families">
<div class="row display">
<div class="large-3 columns">
<span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
</div>
<div class="large-9 columns">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="families/details">
<div class="row">
<span>details</span>
</div>
<div class="row">
<section class="section-container auto" data-section data-section-small-style>
<section class="active" >
<p class="title" data-section-title>Family Info</p>
<div class="content" id="panel1" data-section-content>
<span>Family Info goes here</span>
</div>
</section>
<section>
<p class="title" data-section-title>Members</p>
<div class="content" data-slug="panel2" data-section-content>
<span>Family members list goes here</span>
</div>
</section>
</section>
</div>
</script>
</body>
</html>
My Javascript:
App = Em.Application.create();
App.Router.map(function() {
this.resource('families', function() {
this.route('details');
});
this.resource('charities');
});
Just wanted to know if there are any known issues or caveats between Ember/handlebars and CSS.
Thank you.
EDIT: Got a sample running at http://jsbin.com/iTOsof/3 but does not work after refresh like local host
I am guessing the reason it's not working is because Foundations JavaScript handler is being run when the DOM fires its ready event, at that point Ember haven't rendered its templates so there's nothing to tie the tabs to.
What you could try to do is to add $(document).foundation(); to the DetailsViews didInsertElement.
App.DetailsView = Ember.View.extend({
didInsertElement: function() {
$(document).foundation('section'); // this will only load the section component
}
});
One issue though, since Foundation's JavaScript components are not compatible with Ember you will most likely run into problems when Foundation appends their location hash for the selected section since Ember is using the same method to handle its routing.
You can change Embers location method to a modern variant by specifying:
App.Router.reopen({
location: 'history'
});
This will however not be compatible with IE 9 and below.
Another alternative is to use Bootstrap as an alternative to Foundation (personally I prefer Foundation over Bootstrap but in this case it may be worth it if you don't want to create your own components in Ember), and then use the Ember Components made available for Bootstrap, http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes