I have an invoice application generator and i want to show the invoices with all his transactions in 2 different ways, at the moment i can only do it in 1 way ( Edit Link)
On Edit link where i can see all my invoices and transactions
together ( it s how it works now)
On View link where i want to see only the specific Invoice information with his own transactions
and not any of the other invoices and informations
I have reproduced my case here
This is the route code
App.Router.map(function(){
this.resource('invoices', function(){
this.resource('invoice', { path:'/:invoice_id' }, function(){
this.route('edit');
});
this.route('create');
});
});
The problem is that as long as i am inside the invoices resources i am sharing the invoices templates where everything is generated, but is there a way where i can see only my single invoice with his own transactions inside the invoices route? Is it achievable with the same Route Code? What's the best way to get this done?
<script type="text/x-handlebars" id="invoices">
<div class="large-12 columns">
{{#link-to "invoices.create"}} Add Invoice {{/link-to}}
</div>
<ul class="fatturas-listing">
{{#each invoice in model}}
<li>
{{#link-to "invoice" invoice}}
Edit {{invoice.title}}
{{/link-to}}
</li>
<li>
{{#link-to "invoice" invoice}}
View {{invoice.title}}
{{/link-to}}
</li>
{{else}}
<li>no fatturas… :(
</li>
{{/each}}
</ul>
{{outlet}}
</script>
I don't get your 'edit' part. The problem you have right now is the outlet defined in the invoices template, all sub routes will be rendered in here, so you cannot show an invoice without its parent (invoices) content.
I think the most common way is to remove the outlet and show all invoices in the InvoicesIndex route. Clicking an invoice will then go to a single invoice (a new page without showing the invoices list from the InvoicesIndex route).
Related
I have a nested route that looks like:
/products
/products/:productId
And the /products template renders with a sidebar listing all the products, and a "main" content <div> in the center that is populated with a specific product when clicked. ie:
<div id="productsSidebar">
... navigation tree ...
</div>
<div id="mainContainer">
{{outlet}}
</div>
However, I would like for the {{outlet}} to be replaced with a message like
Please select a product to the left.
When there is no child route, ie. we're just looking at /products and the main <div> is otherwise completely empty.
I haven't found any reference/tutorial demonstrating if this is possible - is there a standard way to render a "default" block of HTML if there no outlet available?
You can use the products index route template to display that html text. You may need to generate the route with something like ember g route products/index
I have successfully displayed JSON objects unto my template thanks the answer on my previous stackoverflow post setting data from route to controller error in Emberjs
Now, I am trying to display a nested JSON data objects to my template using the {{#each}} helper.
here is my code:
http://screencast.com/t/3fhpckr4E
It doesn't give me any errors on my dev console and also it just gives me blank text.
I've also wrote the code in different ways but still no luck..
any feedback would be appreciated
thanks,
You can do this in your template as follows:
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.description}}</li>
<ul>
{{#each childItem in item.items}}
<li>{{childItem.title}}</li>
{{/each}}
</ul>
{{/each}}
</ul>
</script>
Working solution here
The problem with what you are doing is that there is no such thing as data.items.items. Each item in the data.items array has its own items property...
I'm trying to create a simple interface with a list of links on the left, retrieved from an AJAX call, that, when clicked, open in an {{outlet}} to the right with some data, retrieved as well from another AJAX call from that link. So these are my routes:
App.Router.map(function() {
this.resource('about');
this.resource('subreddit', { path: 'subreddit/:subreddit_name' }, function() {
this.resource('comments', { path: 'comments/:id' })
});
});
So I have a dynamic list of links, based on :subreddit_name with the following structure:
subreddit/:subreddit_name/comments/:id
To create the links I have the following codeblock:
<script type="text/x-handlebars" id="subreddit">
<div>
{{#each item in model}}
{{#linkTo 'comments' item.subreddit item.id classNames="list-group-item"}}
<img class="media-object" {{bindAttr src="item.thumbnail"}} class="img-rounded">
{{item.author}}
{{/linkTo}}
{{/each}}
</div>
<div>{{outlet}}</div>
</script>
The link is properly corrected, but, after I've inserted the :subreddit_name dynamic route to the Router, when I click the link it re-renders the whole template, instead of re-rendering only the template for the comments:
<script type="text/x-handlebars" id="comments">
{{#each item in model}}
<div class="panel panel-info mypanel">
<div class="panel-heading">{{item.author}}</div>
<div class="panel-body">
<p>{{{item.body}}}</p>
</div>
</div>
{{/each}}
</script>
I'm still pretty green on EmberJS, that's why I would like to ask for some suggestion/commment on out to correct this.
Thanks in advance!
Here is the jsbin working example:
http://jsbin.com/OlOJEwAX/4/edit?html,js,output
I've managed to get the links working but the undefined is also there rendered :S
I want to have the list of universities and after clicking on one of them, next to this list majors' list is supposed to show. After clicking on one of majors, next to those two lists list of subjects shows. However I did something wrong in routing I suppose. After clicking on one of universities URL changes but the list of majors doesn't show up. But after refreshing the page (with this url) it works perfectly fine. Here is the code:
http://jsbin.com/AQAref/1/edit
Like the other guys said, your jsbin doesn't work. It's pretty apparent the real problem is with your link-to. If it works when you refresh, but not when you click on a link then the difference is where the model is coming from. When you refresh, the model comes from the model hook. When you navigate using a link, the model was supplied by the link-to statement.
In your situation, if you refresh the page you get the majors of a specific university from your university model hook. If you click on the university from your page, the university model is sent to the university resource, not the majors of that university.
So either this needs to say majors
{{#each}}
<li {{bindAttr id="id"}}>
<div class="list-element-title">
{{#link-to 'university' this.majors}}{{name}}{{/link-to}}
</div>
</li>
{{/each}}
instead of
{{#each}}
<li {{bindAttr id="id"}}>
<div class="list-element-title">
{{#link-to 'university' this}}{{name}}{{/link-to}}
</div>
</li>
{{/each}}
Or your route needs to return the university, but I'm guessing the route model hook is correct since you said it works on refresh.
App.UniversityRoute = Ember.Route.extend({
model: function(params) {
var majors = universities.findBy('id', params.univ_id).majors;
return majors;
}
});
I didn't look through the rest of your code, but make sure you are sending the same model through the link-to as you would get if you got the model through the model hook.
I've been trying to learn Ember.js for the last two weeks and I've really struggled. I'm hoping for an 'a-ha' moment but each new feature I try to implement always results in hours of failed testing. I just don't seem to be grasping the framework. I feel like I'm working against it. I'm hoping someone can explain a path forward through this simple example.
I am creating a web app that allows the user to pick products that they will sell to a client. There is a list of products they can chose from and then a list of products they've selected.
I imagine a left-column with navigation controls and a main column showing either the selected products or new products they can add to the order. Here is the basic template:
<script type="text/x-handlebars" data-template-name="pc">
<div id="nav">{{outlet nav}}</div>
<div id="main">{{outlet main}}</div>
</script>
Here is the left navigation template:
<script type="text/x-handlebars" data-template-name="nav">
<div class="button">{{#linkTo "pc.add"}}Add Products{{/linkTo}}</div>
</script>
Here is the selected products template:
<script type="text/x-handlebars" data-template-name="selectedProducts">
{{#each p in controller}}
<div class="product">
<h4>{{p.name}}</h4>
</div>
{{/each}}
</script>
Here is the available products template:
<script type="text/x-handlebars" data-template-name="addProducts">
<div id="addProducts" class="addProducts">
{{#each p in controller}}
<div class="product">
<h4>{{p.name}}</h4>
</div>
{{/each}}
<button {{action "addSelectedProducts"}}>Add Selected Products</button>
<button {{action "back"}}>Back</button>
</div>
</script>
I can load the 'pc' template with some already selected products. Great. I can also navigate to the 'Add Products' template. Great. But when I click 'Add Selected Products', I can't figure out how to move the selected products into the controller/model behind the 'Selected Products' template and then get that template to re-render in place of the 'Add Products template'. It's really two question. How do I update the model of another controller from within a different controller? And, how do I then transition from an event to another route?
Can someone show me how you would design the Route(s) and Controllers? I know that's asking a lot. I"m mostly interested in seeing how you respond to an event in the AppProductsController, update SelectedProductsController's model, and then transition to SelectedProductsRoute and have it re-render the template.
I want to believe this is an amazing framework but I just keep hitting walls.
Andrew
How do I update the model of another controller from within a different controller?
Connect controllers using the needs property. So something like:
//in AddProductsController
needs: ['selectedProducts']
addSelectedProducts: function() {
// Now selectedProductsController can be accessed via the controllers property
otherController = this.get('controllers.selectedProducts');
// add the selected ones...
}
See http://emberjs.com/guides/controllers/dependencies-between-controllers/
how do I then transition from an event to another route?
//in AddProductsController
this.transitionToRoute('blogPosts');
See http://emberjs.com/api/classes/Ember.Controller.html#method_transitionToRoute