I am having trouble with creating a basic Select input...
app/controllers/scratch.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
list: ['green', 'red', 'blue']
});
app/routes/scratch.js
import Ember from 'ember';
export default Ember.Route.extend({
});
app/templates/scratch.js
{{outlet}}
{{view "select" content=list}}
Chrome Console:
Uncaught Error: Assertion Failed: Unable to find view at path 'select'
Wha....
try
{{view "Ember.Select" content=list}}
I had same issue and used {{ view 'Ember.Select' ...}} however I believe Ember 1.8.1 fixes an issue with resolving views so you should be able to just do {{view 'select' content=list}} now.
Related
I am learning ember.js with a tutorial that is built in to their documentation. Having installed it successfully, I followed the steps and created a new application with ember new ember-quickstart, generated a template and defined a route. However, the data that I've included in the route model is not being rendered (there appears to be a parsing error due to an unexpected token default), but I have no idea what it might be referring to. I have pasted the code exactly as it appears. Any suggestions as to what might be causing the error?
SyntaxError: ember-quickstart/routes/scientists.js: Unexpected token (3:2)
routes/scientists.js
import Ember from 'ember';
default Ember.Route.extend({
model(){
return['Marie Curie', 'Albert Einstein', 'Andrei Sakharov']
}
});
templates/scientists.hbs
<h2>List of Scientists</h2>
<ul>
{{#each model as |scientist|}}
<li>{{scientist}}</li>
{{/each}}
</ul>
templates/application.hbs
<h2 id="title">Welcome To Ember</h2>
{{outlet}}
app/router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('scientists');
});
export default Router;
default Ember.Route.extend({
should be:
export default Ember.Route.extend({
sendAction is not working for component. When using component inside view and sending action from component to view.
confirm-dailog.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
closeConfirmDialog:function(){
this.sendAction('onCancel');
}
}
})
confirm-dailog.hbs
<div class="dialog" id="dialog">
<div class="text">{{text}}</div>
<div class="button"{{action 'closeConfirmDialog'}}>Cancel</div>
</div>
modal.js
import Ember from 'ember';
export default Ember.View.extend({
layoutName: 'components/modal-box',
actions:
{
closeDialog:function()
{
console.log('called model closedialog')
},
}
})
modal-box.hbs
<div class="dialog" id="dialog">
{{yield}}
{{confirm-dialog onCancel="closeDialog" text="Would you like to close the modal"}}
</div>
when i am clicking on cancel button closeConfirmDialog action gets called and from there i am trying to send closeDialog action but its showing error Nothing handled the action 'closeDialog'
here i have added screenshot of ui
Ember : 1.8.1
Ember Data : 1.13.7
Handlebars : 1.3.0
jQuery : 1.11.1
Views are removed from Ember 2.0 API. http://emberjs.com/deprecations/v1.x/#toc_ember-view
I would encourage you to replace view with Component.
Moreover for your requirement ember-elsewhere addon or ember-modal-dialog would be most suitable.
Im Using EmberJs 1.13.15 and Ember-CLI , i was trying to slightly modify the main LinkComponent behavior by adding the following code:
app/components/nav-link-to.js:
import Ember from 'ember';
export default Ember.LinkComponent.extend({
tagName: 'li'
});
app/templates/components/nav-link-to.hbs:
{{yield}}
and im using this component in:
app/templates/nav-bar.hbs:
<ul class="nav navbar-nav">
{{#nav-link-to 'index'}}Home{{/nav-link-to}}
</ul>
but whenever i open the nav-bar template in the browser nothing shows up
and in ember inspector's console it shows the following error
Uncaught TypeError: Cannot read property 'slice' of undefined
Any help?
Thanks in advance.
You will have to add the params in your component. Also you will have to call this._super in init method of component. Below is the working component code for extended link-to.
import Ember from 'ember';
export default Ember.LinkComponent.extend({
tagName: 'li',
positionalParams: 'params',
init: function() {
this._super(...arguments);
},
didReceiveAttrs: function() {
this.attrs.params = this.get('params');
this.attrs.hasBlock = true;
}
});
I am trying to show a 'show' template for a list of items.
My index.hbs works as follows:
route/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('item');
}
});
template/items/index.hbs
items/index.hbs
<ul>
{{#each model as |item|}}
<li>
{{#link-to 'items.show' item}}
{{item.name}}
{{/link-to}}
</li>
{{else}}
<li>No contacts found.</li>
{{/each}}
</ul>
However, when I click a link that is generated, it brings me to the correct route (localhost:4200/items/1), however, it gives me the following error: Error while processing route: items.show Assertion Failed: You may not pass 'undefined' as id to the store's find method Error: Assertion Failed: You may not pass 'undefined' as id to the store's find method
Here is my show.js and hbs:
routes/show.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.findAll('item', params.id);
}
});
and templates/items/show.hbs
{{name}}
here is router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
export default Router.map(function() {
this.resource('items', function() {
this.route('show', {path: ':item_id'});
});
});
I can not figure out when its not working! I read that params is not sent from index to show..but then?!
Thank you in advance. Any exaggerated answer would be most appreciated.
Hope this helps. http://ember-twiddle.com/147af82f6fa69bf97414
After looking at your code snippets closely, I realized that inside your item:model hook you are passing params.id to store.findAll return this.store.findAll('item', params.id), however in your router.js you specified it as item_id. You should be using the same param name used in your route definition.
I have set up a simple api and a new ember app using ember cli
However, while I can get a full list of 'items' to appear, I can't get a single item to work using params.
I have my files set up like the following:
/models
item.js
/routes
/items
index.js
show.js
/templates
/items
index.hbs
show.hbs
application.hbs
index.hbs
items.hbs
router.js
For reference, here is what I have in the files
I set up my models/item.js a follows:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string')
});
I added my code to my router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('items', function() {
this.route('show', { path: '/:item_id' });
});
});
export default Router;
Then I created my templates/index.hbs
{{outlet}}
And finally, added my templates/items/index.hbs
<ul>
{{#each model as |item|}}
<li>
{{#link-to 'items.show' item}}
{{item.name}}
{{/link-to}}
</li>
{{/each}}
</ul>
This works as intended.
However, when I click a link (/items/1), it no longer performs as expected. It will show the items/show.hbs correctly assuming I do no use any handlebars variables ({{item.name}}). For example, If I just include text, this is my items/show.hbs it will display the text. When I add in, {{name}} it displays a blank page
Here is my templates/items/show.hbs
{{name}}
and my routes/items/show.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.queryRecord('item', params.item_id);
}
});
What am I doing wrong?
Thanks in advance!
It looks like you're not using reference to model when using it in template
Here is my templates/items/show.hbs
{{name}} < This is a model's property- name
Correct usage: {{model.name}}
and my routes/items/show.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.queryRecord('item', params.item_id);
}
});
Way of using hash
return Ember.RSVP.hash({
something: store.find('y', { study: params.study_id }),
somethingElse: store.find('x', 1),
});