We Keep Coding

Why does my routing not work in Ember Js?

I'm working on a todoApp with a rails API and frontend as Ember.
I've followed this tutorial Ember todo App
However, it a bit old and I kinda lost in my routing.
I've a todos.hbs which should be rendered localhost:4200/, but it is a clear page.
Here's what my router.jslooks like :
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('todos', { path: '/' });
});
export default Router;
And my routes/todos.js:
import Route from '#ember/routing/route';
export default Route.extend({
model: function() {
return this.store.find('todo');
}
});
On my application.hbs, there's only an ```{{outlet}}
and my todos.hbs looks like this :
<section id="todoapp">
<header id="header">
<h1>todos</h1>
{{input type="text" id="new-todo" placeholder="What needs to be done?" value=newTitle action="createTodo"}}
</header>
<section id="main">
<ul id="todo-list">
{{#each itemController="todo"}}
<li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{input insert-newline=(action "acceptChanges")}}
{{else}}
{{input type="checkbox" checked=isCompleted class="toggle"}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
{{outlet}}
So now, I dont know where the mistake is, it only rendered me a blank page. If anyone can explain what is wrong into my work, I would appreciate.
UPDATE
I've found that a troubles appear in my application.js, here's what it looks like now, if that can help :
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
host: 'http://localhost:3000/api'
});

As Joe has already mentioned, store.find('todo') has been removed and from what I can see it was removed in 2015 but I am not 100% sure about that 🤔 You are likely to find other large issues following such an old tutorial and using the latest Ember. Have you seen the official tutorial on the Ember Guides site? https://guides.emberjs.com/release/tutorial/ember-cli/ there is always a lot of people making sure that it is as up-to-date as possible!
I will continue to try to answer your question but I do strongly recommend that you try a slightly more modern tutorial in the meantime 😂
Joe is indeed correct that you need to update the call in your route to use the updated method this.store.findAll('todo') and you should be able to see that recommended in your console output if you bring it up (you can usually right-click anywhere on the page and select 'Inspect Element' and then click the console tab)
As you can see the error says:
Using store.find(type) has been removed. Use store.findAll(modelName) to retrieve all records for a given type. Error: Assertion Failed: Using store.find(type) has been removed. Use store.findAll(modelName) to retrieve all records for a given type.
Once I update that method so we're using findAll() it gives me a new error:
Error while processing route: todos No model was found for 'todo' Error: No model was found for 'todo'
Which means I need to create the file models/todo.js. If you do look at a more modern tutorial it will probably recommend that you use a generator to generate this file such as: ember generate model todo.
I then added your adapter and this is where I need to stop because I don't have the backend server running on my local machine so it will always fail for me 😄
You can see the code I was using to test this here: https://ember-twiddle.com/14bab300c47493c10a9de69efd591092
If you haven't used Ember Twiddle before I would highly recommend it if you are trying to ask a question here on Stack Overflow, on the Ember Discord server or on the Ember forums. If you are able to recreate your issue on an Ember Twiddle then you are very likely to be able to get a helpful response 🎉
Let me know if you have any questions and I hope this has been helpful 👍

I noticed that your routes/todos.js calls this.store.find('todo');. Using store.find(type) has been removed. I think you have to call this.store.findAll('todo');

toggle element visibility in ember js based on a boolean

I have created template and controller both called navbar. The code that i have in controller is simply
import Ember from 'ember';
export default Ember.Controller.extend({
isLogged: true,
});
and that in template is
{{#if isLogged}}
{{#link-to 'login' class="uk-button uk-button-danger"}}Login{{/link-to}}
{{#link-to 'signup' class="uk-button uk-button-danger"}}Join now{{/link-to}}
{{else}}
{{#link-to 'dashboard' class="uk-button uk-button-danger"}}Dashboard{{/link-to}}
{{/if}}
<button class="uk-button uk-button-large uk-button-primary uk-width-1-1" disabled={{isLogged}}>Test button</button>
The same does not seem to be working. Am i going wrong somewhere ?
The template and controller were generated using ember generator itself and the code above is the only modifications that i made.
EDIT:
Exploring the documentation, i noticed that the name of controller should be same as defined in route. Now navbar is only a template which i import using partial is there any workaround i might use for the same ?

You should use a component for this.
Use {{partial}} only if you want to render a template in the current context. Use it only if your .hbs files became to big, but use it rarely. Often a component is the better choice.
Also there you should almost never use {{render}}. You can almost always refactor it to a component.
Also using {{render}} with a model param is deprecated.

The problem was that 'partial' will only provide the template not the controllers. The correct way for this would be to use render which will import views and controllers also.

Ember generated action or jquery onclick

I have an ember application which works fine. But user's interaction does some DOM insertion like below...
$(.test).append(<a {{action "getData"}}>Get Data</a>);
The problem is that Ember seems do not recognize that an action "getData" has been added to the DOM. Nothing is happening when I click the element. Any thoughts on this?
Another way I am trying to do is:
//create the element
$(.test).append(<a id="idnum">Get Data</a>);
//make click listener
$('#idnum').click(function(){
console.log("get data");
}
my question is where should i place the code inside the component so the it can listen on the click event. Thanks.

You should do it in Ember way. Try handlebars {{#if}} helper to render an element dynamically.
{{#if canGetData}}
<a {{action "getData"}}>Get Data</a>
{{/if}}
Here you can set the value of the canGetData to true in the controller based on the users action.

The first example can't work because ember does not analythe the Handlebars elements in the DOM, but rather parses your Handlebars template with HTMLBars, which is a full HTML parser, and then renders it manually by inserting elements, not text into the DOM.
However the second example is the way to go if you have to rely on external code that does manual DOM manipulation. And it does work. Checkout this twiddle.
This does work:
this.$('.target').append('<a id="idnum">Get Data</a>');
this.$('#idnum').on('click', () => {
alert('clicked');
});
Just make sure that the DOM is ready. So do it in the didInsertElement hook or after the user clicked a button or so.

Like Lux suggested avoid DOM manipulation. I prefer the following approach,
if it is dynamic then you can consider wrapping DOM element as a new component and use component helper.
find sample twiddle
In application.js
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
linksArray:[ Ember.Object.create({value:'Text to display',routename:'home'}),
Ember.Object.create({value:'Text to display2',routename:'home'})],
actions:{
addItem(){
this.get('linksArray').pushObject(Ember.Object.create({value:'AddedDynamically',routename:'home'}));
}
}
});
in Application.hbs
<h1>Welcome to {{appName}}</h1>
<br>
{{#each linksArray as |item|}}
{{component 'link-to' item.value item.route }}
{{/each}}
<button {{action 'addItem'}}>Add Item</button>
<br>
{{outlet}}
<br>
<br>

Emberjs templating and routing

So I have a regular website that I built in Emberjs. Now I want to add an admin to the app. The problem I'm facing is that the header for the app is in application.hbs but for the admin I want the header to be different. the header needs to stay in the application.hbs because of the urls need to be /about not user/about or what ever arent route I could create. I tried making the header a component and add it to the route that worked but it loses the webapp feel since the header leaves from route to route. Is there a way for me not to extend the application template in admin?

As far as I have understood your question, you are looking for having different headers for admin and non-admin routes without converting the header as a component. If so, then you can achieve it by using a flag in the application handlebar say, "isAdmin". For example:
In the application.hbs
{{#if isAdmin}}
<h2>Header for Admin Route</h2>
<button {{action "goToApp"}}> Go To Application </button>
{{outlet "admin"}}
{{else}}
<h2>Header for Application Routes</h2>
<button {{action "goToAdmin"}}> Go To Admin Panel </button>
{{outlet "app"}}
{{/if}}
Here "isAdmin" will be property in "ApplicationController". And, you can set this flag inside the "activate" and "deactivate" handlers of the route.
In the route/admin.js
activate: function () {
this.controllerFor("application").set("isAdmin", true);
},
deactivate: function () {
this.controllerFor("application").set("isAdmin", false);
},
renderTemplate: function () {
this.render({
outlet: "admin"
});
}
Working JSBIN: http://jsbin.com/yilipa/edit?html,js,output
I hope this satisfies your requirement. If I have misunderstood your question, please do correct me.

Open modal dialog from within ember-table cell

I'm at my wit's end trying to accomplish what should be very straightforward behavior: I have an Ember table component (from Addepar), I would like to have buttons inside that table that trigger a modal dialog.
Since I'm new to Ember, I started with the Ember table starter kit jsbin available here: http://jsbin.com/fasudiki/9/edit
I added a custom cell view so I can use my own template:
columns: function() {
var firstColumn;
firstColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 350,
textAlign: 'text-align-right',
headerCellName: 'Column 1',
tableCellViewClass: 'App.EmberTableMyCustomCell',
getCellContent: function(row) {
return row.get('myRandomValue').toFixed(2);
}
});
return [firstColumn];
}.property(),
with
App.EmberTableMyCustomCell = Ember.Table.TableCell.extend({
templateName: 'custom-table-cell',
classNames: 'custom-table-cell'
});
and
<script type="text/x-handlebars" data-template-name="custom-table-cell">
<span class="ember-table-content">
{{ view.cellContent}}
<button {{action 'openModal' 'modal'}}>This one doesn't</button>
<button {{action 'myCellAction' 'modal'}}>This one doesn't either</button>
</span>
</script>
I then tried following the official Ember guide for modal dialogs: http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/
In Ember terminology, I'd like to be able to trigger an action on the Index route from within the ember-table component.
I tried triggering the action directly from the template which didn't work:
<button {{action 'openModal' 'modal'}} >Open modal</button>
I then tried what is suggested in the "Sending Actions From Components To Your Application" guide:
http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/
by creating an 'actions' map on the App.EmberTableMyCustomCell view and then using both
this.send('openModal', 'modal');
and
this.sendAction('openModal', 'modal');
Again, no success.
I then tried what's recommended in this SO question:
Ember component sendAction() not working
by setting the action name in a custom attribute on my ember-table and using it at a parameter for triggerAction(...) using:
<div class="table-container">
{{table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"
myCustomActionName="openModal"
}}
</div>
and
actions : {
myCellAction : function () {
this.triggerAction('myCustomActionName', 'modal');
}
}
Again, no success.
Any ideas what I'm doing wrong?
I have put the code in jsbin: http://jsbin.com/yovikaviseve/2/edit

I believe that (unfortunately) your action in App.EmberTableMyCustomCell is not being called. I'm not sure if it's the best solution, but I was able to work around the problem by extending Ember.Table.EmberTableComponent and defining my action there. Once the action was called there, I was able to use the method from your linked SO post to propagate the action to the ApplicationController.
I actually sent the primary action instead to make things a bit simpler, as described here: http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/.
Here's the working example: http://emberjs.jsbin.com/yemebu/3/edit.
Thanks for including a JS Bin - made it much easier for me to take a look. Let me know if you have more questions or if this approach doesn't work for you!