I am trying to use data from a component but the yield is not coming through. Its almost like its not hitting the component template?
Is there anything wrong with the structure of this code
page
{{#wrapping-component
as |fullName|
}}
{{fullName}}
{{log fullName}}
{{/wrapping-component}}
..
wrapping-component.hbs
<div class="wrapper-component">
{{yield fullName}}
</div>
wrapping-component.js
import Ember from 'ember';
var WrappingComponent = Ember.Component.extend({
fullName: function(){
console.log("get blue");
return "blue";
},
});
export default WrappingComponent;
so on the page I should see "blue" appear - but its not showing anything
It looks like you may want a property instead of a function?
import Component from '#ember/component';
import { computed } from '#ember/object';
export default Component.extend({
fullName: "blue",
// if you want a computed property:
fullName2: computed(function() {
return 'blue';
});
});
that will print blue in your template.
otherwise the fullName reference is an uninvoked function
Related
test-component.js
import Ember from 'ember';
export default Ember.Component.extend({
store: Ember.inject.service(),
showLang: Ember.on('init', function() {
var store = this.get('store');
return store.findAll('language');
}),
});
I checked with console and yes they show
XHR finished loading: GET "http://127.0.0.1:8000/languages".
So backend recognize my test-component function.
Now in test-component.hbs I have
{{#each showLang as |lang| }}
<li>{{lang.title}}</li>
{{/each}}
The result was empty. How can I do so data could show up in test-component.hbs?
First of all - you should do it in route and pass data as model to component, but if you really want to do this in component you can do so:
test-component.js:
import Ember from 'ember';
export default Ember.Component.extend({
store: Ember.inject.service(),
showLang: Ember.on('init', function() {
this.get('store').findAll('language').then(languages => this.set('languages', languages));
})
});
test-component.hbs:
{{#each languages as |lang| }}
<li>{{lang.title}}</li>
{{/each}}
I've been trying to create an Ember Component with the latest version on Ember. Here is the part of the component I'm having trouble with though:
//app/templates/components/page-r.hbs
<div class="pager-container">
{{#each range as |page|}}
<button type="button" disabled={{isCurrentPage(page)}}>{{page}}</button>
{{/each}}
</div>
//app/components/page-r.js
import Ember from 'ember';
const PageR = Ember.Component.extend({
settings: Ember.computed('params.[]', function() {
return this.get('params')[0];
}),
range: [4,5,6],
currentPage: 1,
isCurrentPage(pageIndex) {
return this.currentPage === pageIndex;
},
});
PageR.reopenClass({
positionalParams: 'settings'
});
export default PageR;
There is more to the component than that, but my question is this:
Is it possible to make the disabled attribute update based off of the result of an action like I'm trying to do? If so, how?
The above code doesn't even compile, but I've tried a number of variations and haven't gotten any of them to work. I can get the disabled property to work based off a pure boolean value, but can't figure out how to get this to execute the function and utilize the boolean value that is returned from it to fuel the disabled attribute. Any help would be greatly appreciated!
You need to use another component to create the computed property.
// app/templates/components/page-r.hbs
<div class="pager-container">
{{#each range as |page|}}
{{page-button page=page currentPage=currentPage}}
{{/each}}
</div>
// app/templates/components/page-button.hbs
<button type="button" disabled={{isCurrentPage}}>{{page}}</button>
// app/components/page-r.js
import Ember from 'ember';
const { computed } = Ember;
const PageR = Ember.Component.extend({
settings: computed('params.[]', function() {
return this.get('params')[0];
}),
range: [4,5,6],
currentPage: 1
});
PageR.reopenClass({
positionalParams: 'settings'
});
export default PageR;
// app/components/page-button.js
import Ember from "ember";
const { computed } = Ember;
export default Ember.Component.extend({
tagName: 'span',
isCurrentPage: computed('currentPage', 'page', function() {
return this.get('currentPage') === this.get('page');
}),
});
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'm building a simple application using Ember v1.8.1, Ember CLI 0.1.15 and Ember Data 1.0.0-beta.15 in an attempt to learn the basics of Ember.js. Data is coming from a simple REST API, so I'm using the DS.RESTAdapter and DS.RESTSerializer. The payload is normalized in the serializer, because the API doesn't properly wrap its data in the required hashes.
I'm trying to implement an edit route, but am unable to populate the form fields of that template or even display a simple value. My index route, displaying a list of posts, works as expected, but edit doesn't for some reason.
Using {{title}} in my template doesn't render the value, but outputs a string of unexpected data, something along the lines of: <my-app#model:post::ember413:21>. I'm probably passing something improperly from the route or elsewhere, but I don't know what and where exactly.
Below is some of my relevant code:
app/router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('login');
this.resource('posts', function() {
this.route('add');
this.route('view', { path: ':post_id'});
this.route('edit', { path: ':post_id/edit'});
});
});
export default Router;
app/routes/posts/edit.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function(params){
return this.store.find('post', params.post_id);
}
});
app/routes/posts/index.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function(){
return this.store.find('post');
}
});
app/controllers/posts/edit.js
import Ember from 'ember';
export default Ember.ObjectController.extend();
app/serializers/application.js
import Ember from "ember";
import DS from "ember-data";
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
primaryKey: 'ID',
attrs: {
author: { embedded: 'always' }
},
extractSingle: function(store, type, payload, id) {
payload = { post : payload };
return this._super(store, type, payload, id);
},
extractArray: function(store, type, payload) {
payload = { posts : payload };
return this._super(store, type, payload);
},
serializeIntoHash: function(hash, type, record, options) {
Ember.merge(hash, this.serialize(record, options));
}
});
app/templates/edit.hbs
<div class="page">
<div class="page-content">
<h2>{{title}}</h2>
{{{content}}}
</div>
</div>
app/templates/index.hbs
<div class="page">
<div class="page-content">
<ul>
{{#each}}
<li>
<h2>{{title}}</h2>
{{{content}}}
</li>
{{/each}}
</ul>
</div>
</div>
Having looked at some examples the above should work, so probably there's an error in the serializer. In the route I can access values from the store however. The following logs the expected data when used in the model method of my edit.js route:
this.store.find('post', params.post_id).then(function(post) {
console.log(post.get('title'));
});
UPDATE: Here is a JS Bin recreating most of the application without Ember CLI. The behaviour is exactly the same as on my local machine; the edit route doesn't properly show the content value (title works, for some reason). When I swap to fixtures instead of the API output the problem remains the same. Also the model in the bin doesn't map to all the values returned by the API, but that doesn't seem to make a difference.
UPDATE 2: Seems the content entry of the returned payload is causing the problems, when I rename the key it's displayed correctly in the edit template. Didn't realise this before, because I was so focussed on getting the content value to display and forgot to test other values. Not sure why it happens only happens on a nested route though and with that particular keyword.
UPDATE 3: If I understand correctly, this might be related to an outstanding issue for Ember Data, there's a proposal for reporting such collisions as well.
I have a one-to-many relationship (using Ember Data). All I want to do is list the first N number of items from that relationship in an overview (index) template. I'm trying to use the Array.slice method but it doesn't seem to return anything at all.
Here's what I have right now:
models/account.js
// Account model
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
notes: DS.hasMany('note', { async: true })
});
models/note.js
// Note model
import DS from 'ember-data';
export default DS.Model.extend({
body: DS.attr('string'),
date: DS.attr('number'), // unix timestamp
account: DS.belongsTo('account', { async: true })
});
controllers/account/index.js
// account/index controller
import Ember from 'ember';
export default Ember.ObjectController.extend({
firstNotes: function() {
return this.get('notes').slice(0,2);
}.property('notes')
});
templates/account/index.hbs
{{!-- this lists all the associated `Notes` --}}
{{#each notes}}
{{date}}<br>
{{body}}
{{/each}}
{{!-- this doesn't list anything!!?? --}}
{{#each firstNotes}}
{{date}}<br>
{{body}}
{{/each}}
I figured this out just as I was about to post it so I figured I'd answer it...
All I was missing was a #each in the computed property dependency. So it works as expected with this:
firstNotes: function() {
return this.get('notes').slice(0,2);
}.property('notes.#each')
Simple.