In my project I am trying to use Foundation's accordion but to no avail. Specifically I have followed this guide here https://coderwall.com/p/azjwaq but it doesn't work. It only works if I explicitly refresh the page, but If I navigate to another controller it stops working. Is this the correct way to initialize foundation 5?
I use foundation 5.3.3 with ember 1.8.0-beta1 and ember-cli 0.44.
Edit:
heads up! I managed to make it work. BUT the whole app now is really really really slow. Specifically I have this inititializer in app/initializer/foundation.js.
import Ember from 'ember';
export default {
name: 'foundation-config',
initialize: function() {
Ember.View.reopen({
startFoundation: function() {
Ember.run.scheduleOnce('afterRender', this, function(){
$(document).foundation();
});
}.on('didInsertElement')
});
}
};
Am I doing something wrong?
Maybe try this:
Stop initializing Foundation for each view. Try extending views which contain accordion to a separate object and then extend it.
App.FoundationView = Ember.View.extend({
didInsertElement: function () {
$(document).foundation();
}
});
App.ViewWhichNeedFoundation = App.FoundationView.extend({
...
})
Simply initializing foundation the normal way manually worked for me. Just before the closing body tag:
<script>
$(document).foundation();
</script>
Related
I am using the latests ember-cli version 2.12.1 and ember.
I have configured my routes as this:
Router.map(function() {
this.route('companies', function() {
this.route('companydetail', {
path: '/:company_id'
}, function() {
this.route('employees', function() {
this.route('employeedetail', {
path: '/:employee_id'
});
});
});
});
});
The templates are in
/templates/companies/index.hbs
/templates/companies/companydetail.hbs
/templates/companies/companydetail/employees/employees/employeedetail.hbs
I can link to the route
{{#link-to "companies.companydetail.employees.employeedetail" model employee}}Edit{{/link-to}}
and that works. But the template is not rendered.
Instead the companydetail.hbs is used. I changed the
/routes/companies/companydetail/employees/employeedetail.js to render the correct template:
renderTemplate: function(params) {
this.render('companies/companydetail/employees/employeedetail', {
into: 'application'
});
}
This is working, BUT: the call to the model (request to the server) is not done. I could try and make the call manually, but I start to believe, that I am doing something wrong with the route.
Any advice?
UPDATE:
The url is /companies/1/employees/2. When ember constructs this url when I click on a link, the request to the model is not executed. When I refresh the browser page, the requests are fired. This is a somewhat typical experience since the model-call is not triggered when the url not changed. But the strange thing is, that it changes and still no model-request...
Thanks in advance,
Silas
That the companydetail.hbs is used is correct. The employeedetail.hbs should be rendered into the {{outlet}} inside the companydetail.hbs. Make sure to have an {{outlet}} inside the companydetail.hbs.
I need to use them in my ember-cli project.
How to start?
I writed in terminal:
bower install isotope --save
then in my ember-cli-build.js I added app.import ecc..., but then I don't know what to do.
Where to put my intialization script, like this:
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
If I put it in application.hbs it give to me an error and when i change route with {{#link-to}} it doesn't work anymore.
What to do?
In the web there aren't many resources about this.
You should create a component:
ember g component isotope-grid
Then, in component's didInsertElement hook you should call isotope on component's jQuery element:
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['grid'],
didInsertElement() {
this.$().isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
}
})
Then, instead of using <div class="grid"></div>, use:
{{#isotope-grid}}
... HTML goes here
{{/isotope-grid}}
I've got a Ember CLI based blog. I currently resize all <img> inside posts upon clicking them using this function inside the application-controller.
I rely on on('init') and Ember.run.later and this feels just dirty.
How can I improve the subscription code below?
import Ember from 'ember';
export default Ember.ArrayController.extend({
imageScaling: function() {
Ember.run.later((function() {
//Subscribe to the actual event
Ember.$(".post-content img").on("click", function(){
// RESIZE HERE
})
}), 3000)
}.on('init')
});
If you're inserting all of your images inside Ember templates, you can always use the action helper:
<img {{action 'scaleImages' on='click'}} src='' />
I realize that's probably not the case though. The way I've dealt with DOM interactions in the past is to override the application view then set up and tear down my event handler there. You can also avoid the Ember.run.later call by modifying your jQuery event listener. Here's how I would do it:
// app/views/application.js
export default Ember.View.extend({
setupImageScaling: function() {
$('body').on('click.image-scaling', 'img', function() {
// RESIZE HERE
});
}.on('didInsertElement'),
teardownImageScaling: function() {
$('body').off('click.image-sacling');
}.on('willDestroyElement')
});
In my opinion, the above is the 'most Ember' way of handling this kind of situation.
I'm new to ember/ember-cli and am slowly getting my head around the immense learning curve... I have come across an issue I was hoping someone could advise me on...
I have an App that displays a contact and then places tabbed content underneath the contact details, one tab contains some notes info the other some site locations info.
I essentially have a Bootstrap "Tabbed" section to my page. With (currently) two Tabs labelled "Sites" and "Notes". The idea being if you click Notes, you see content from the Notes pod and if you click Sites you see content from the Sites Pod.
To do this i am naming my outlets e.g.
{{outlet 'sites-tab'}}
and
{{outlet 'notes-tab'}}
i.e.
{{#em-tabs selected-idx=tab_idx}}
{{#em-tab-list}}
{{#em-tab}}Sites{{/em-tab}}
{{#em-tab}}Notes{{/em-tab}}
{{#em-tab}}...{{/em-tab}}
{{/em-tab-list}}
{{#em-tab-panel}}
{{outlet 'sites-tab'}}
{{/em-tab-panel}}
{{#em-tab-panel}}
{{outlet 'notes-tab'}}
{{/em-tab-panel}}
{{#em-tab-panel}}
<p>Future Use</p>
{{/em-tab-panel}}
{{/em-tabs}}
and using:
renderTemplate: function() {
this.render({
into: 'contacts.show', // the template to render into
outlet: 'notes-tab' // the name of the outlet in that template
});
}
in the two pods routes to place the content in the right place.
if i use the urls manually e.g:
contacts/5961168002383609856/sites
contacts/5961168002383609856/notes
Then the content is rendered into the relevant Tab (and the other is empty).
each pod structure is along the lines of:
app/pods/notes/-form/template.hbs
app/pods/notes/edit/controller.js
app/pods/notes/edit/route.js
app/pods/notes/edit/template.hbs
app/pods/notes/index/controller.js
app/pods/notes/index/route.js
app/pods/notes/index/template.hbs
app/pods/notes/new/controller.js
app/pods/notes/new/route.js
app/pods/notes/new/template.hbs
app/pods/notes/show/controller.js
app/pods/notes/show/route.js
app/pods/notes/show/template.hbs
app/pods/notes/base-controller.js
app/pods/notes/route.js
can you think of what would make ember-cli render both contents into each outlet on the same page?
my app/router.js contains:
Router.map(function() {
this.resource("contacts", function() {
this.route("new");
this.route("edit", {path: ':contact_id/edit'});
this.route("show", {path: ':contact_id'}, function(){
this.resource("notes", function() {
this.route('new');
this.route('edit', {path: ':note_id/edit'});
});
this.resource("sites", function() {
this.route('new');
this.route('edit', {path: ':site_id/edit'});
});
});
});
});
many thanks with any help you can suggest.. thanks.
EDIT:
OK, as per #Sam Selikoff suggestion I tried switching to components, doing:
ember generate component contact-sites
ember generate component contact-notes
created the files:
app/components/contact-notes.js
app/components/contact-sites.js
and
app/templates/components/contact-notes.hbs
app/templates/components/contact-sites.hbs
I then moved my template html from pods/notes/index/template.hbs into app/templates/components/contact-notes.hbs
This (with a few tweaks) seemed to display the content correctly. I then moved on to editing a Note. TO do this I have a button with an action: {{action "editNote" note}} so had to move my actions from pods/notes/index/route.js into app/components/contact-notes.js
for example:
app/components/contact-notes.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
newnote: function(note) {
console.log("NEW NOTE:", note.contact);
this.transitionTo('notes.new');
return false;
},
editNote: function(note) {
console.log("Edit Note:", this);
this._transitionTo('notes.edit', note);
return false;
}
}
});
but I cant seem to get the Edit Note Route to work. I either (using this._transitionTo('notes.edit', note); ) get an error saying:
DEPRECATION: Ember.View#transitionTo has been deprecated, it is for internal use only
or if i use this._transitionTo('notes.edit', note); I get a different error:
TypeError: currentState is undefined
if (currentState.enter) { currentState.enter(this); }
any thoughts on how I can get to a route from within a component? - thanks.
In general you shouldn't need to call render or use named outlets that often. Instead, use components, something like
{{#em-tabs selected-idx=tab_idx}}
{{#em-tab-list}}
{{#em-tab}}Sites{{/em-tab}}
{{#em-tab}}Notes{{/em-tab}}
{{/em-tab-list}}
{{#em-tab-panel}}
{{contact-sites site=contact.sites}}
{{/em-tab-panel}}
{{#em-tab-panel}}
{{contact-notes notes=contact.notes}}
{{/em-tab-panel}}
{{/em-tabs}}
Remember your URL structure is tied to how your interface renders, so if you want two things to show simultaneously, don't tie them to two distinct URLs.
While it doesn't become simpler than this: fiddle I can't get the template to be rendered. I'm obviously missing something simple but have been starring at this for hours now. Can somebody spot the error?
When debugging in chrome I can see that the View is entered as well as the controller, but the template doesn't seem to come to life. I have several other ember tests running on my laptop that render just fine.
<script type="text/x-handlebars" data-template-name="index">
<h1>Application</h1>
<p>Your content here.</p>
{{outlet}}
</script>
Albumartist = Ember.Application.create();
Albumartist.Router.map(function(match) {
this.route('index', {path: '/'});
});
Albumartist.IndexView = Ember.View.extend({
});
Albumartist.IndexRoute = Ember.Route.extend({
});
Albumartist.IndexController = Ember.Controller.extend({
renderTemplate: function(controller, model){
console.log('hi');
}
});
The problem is simple: You chose Ember as a Framework didn't include jQuery, which is necessary for Ember to run. I've updated the Fiddle to include Ember and Handlebars as a resource and jQuery as a Framework.
Also, since Router v2.1 you don't have to pass the match argument to the router:
Albumartist.Router.map(function() { // no match argument needed anymore
this.route('index', {path: '/'});
});
If I am not mistaken, you need to wrap your code in <script> tags which appear to be missing. This could possibly by a typo when copying your code over to this site though.