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;
}
});
Related
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.
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),
});
This question is similar to the unanswered Extending link-to.
I'm trying to extend the {{link-to}} helper to output additional attribute bindings. However the attributes do not appear in our HTML. Heres what we have:
//views/link-to.js (normally coffeescript)
import Ember from 'ember'
var LinkToView = Ember.LinkView.reopen({
attributeBindings: ['data-toggle', 'data-placement', 'title']
});
export default LinkToView;
The rendered output is this:
define('app/views/link-to', ['exports', 'ember'], function (exports, Ember) {
'use strict';
var LinkToView;
LinkToView = Ember['default'].LinkView.reopen({
attributeBindings: ['data-toggle', 'data-placement', 'title']
});
exports['default'] = LinkToView;
});
When its called and its rendered output:
// Any .hbs file
{{#link-to 'account'
class='header-link'
data-toggle='tooltip'
data-placement='right'
title='Account'
}}
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
{/link-to}}
// Rendered...
<a id="ember615" class="ember-view header-link" href="/account" title="Account">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
Where are we going wrong? I know it has something to do with the resolver or how we're calling it.
Thanks.
For Ember 2.0+
Create directory app/reopens
Create file app/reopens/link-component.js
import Ember from 'ember';
Ember.LinkComponent.reopen({
attributeBindings: ['data-variation', 'data-offset', 'data-content','data-any']
});
in app.js import it
import LinkComponent from './reopens/link-component';
That's all. For ember-cli < 2.0 replace LinkComponent with LinkView
So its probably not the rightest answer, but I discovered on accident that if you put any sort of extensions or overrides like this into route/applaction.js's beforemodel hook that it works perfectly:
// routes/application.js
export default Ember.Route.extend({
beforeModel: function() {
Ember.LinkView.reopen({
attributeBindings: ['data-toggle', 'data-placement', 'title']
});
})
});
File: app/reopens/link-component.js
If this can help others for generic data-* for Ember 2.x .
import Ember from 'ember';
Ember.LinkComponent.reopen({
init: function() {
this._super();
var self = this;
// bind attributes beginning with 'data-'
Object.keys(this).forEach(function(key) {
if (key.substr(0, 5) === 'data-') {
self.get('attributeBindings').pushObject(key);
}
});
},
});
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.