Hi I want extend my super route class something like this :
//routes/auth.js
export default Em.Route.extend({
someFunction:function(){
//code
}
});
//routes/test.js
export default App.AuthRoute.extend({
model: function(){
return this.someFunction(); //Call function from super class
}
});
routes/test.js doesnt work -white screen and nothing in console - I do not know naming conventions to get this.
You need to import any other modules that you reference first so that they can be resolved:
import AuthRoute from 'appkit/routes/auth';
export default AuthRoute.extend({
....
});
Related
I'm relatively new to EmberJS, so any help is appreciated. I'm trying to do something I feel should be theoretically simple - I have a component and on one of the DOM elements, I want to have a click handler which redirects to a route, but I've been unable to figure out how to make that happen.
I have my component:
//components/sample-card-header.js
import Component from '#ember/component';
export default Component.extend({
actions: {
goToSamples() {
this.transitionTo('samples');
}
}
});
And my handlebars template:
//templates/components/sample-card-header.hbs
<div class="card_header" {{action "goToSamples" bubble=false}}>Samples</div>
I know I can just do:
<div class="card_header" onClick="window.location.href=('/samples')" > but I'd like to use the router paths.
Thanks in advance
The issue is that transitionTo is not available inside of components. You have two options. You could pass the action up to your route by modifying your code to be this.
1.) Create an action in your route to handle the transition and then pass the action up from the component. Follows the actions up, data down mentality of Ember.
component
import Component from '#ember/component';
export default Component.extend({
actions: {
goToSamples() {
//this passes the action to the components parent. It could be a route, other component, etc..
this.sendAction('transition');
}
}
});
route template.hbs with component
{{said-component transition='action-on-route'}}
route.js
...
actions: {
action-on-route: function(){
this.transitionTo('samples')
}
}
2.) You could inject the routing service to the component. This would make transitionTo available to the component through the routing service. I would still suggest option one as it makes the component more extensible.
Your new component code.
import Component from '#ember/component';
import { inject }from '#ember/service';
export default Component.extend({
router: inject(),
actions: {
goToSamples() {
this.get('router').transitionTo('samples');
}
}
});
Another Option
I just thought of this as I was editing. You could also use the Link-to helper if you simply need to do a transition. The link-to helper provides the ability to change the tagName. So you could render a div with a click event to transition the route using the link-to helper.
Example component.hbs
...
{{#link-to 'samples' class='card_header' tagName='div'}}
Some html
{{/link-to}}
I am creating a Single page application base on MVC, and I am stuck with a small issue. I am exporting the reference of controller class and I am importing it at a few places and it is working fine but when I am trying to import it into a specific file, it's not working, I spent a lot of time, but couldn't figure it out. I am sure I am missing some obvious thing. Here is my code(Link to Repo for more details):
Controller(Actual File):
class Controller extends Base {
constructor(){
super()
//more code
}
//more code
static create() {
return new Controller() // planning to make a singleton later on
}
}
const controller = Controller.create()
export default controller
Model(import works in this one, Actual file):
import controller from '$js/Controller'
export default class Model {
... Model code
static fxn(){
controller.controllerFunction()
}
}
Utils File(import doesn't work in this file, Actual File):
import controller from '$js/Controller'
export function someFunction(args) {
const value = controller.get() // Throws an error saying `controller` is not defined
}
Here is the Github Repo link. Please let me know if you need anything else.
I am trying to grasp the underlying system of Ember.JS. Whereto are those Ember-Objects exported and how are they used?
components:
export default Ember.Component.extend({ ... });
controllers:
export default Ember.Controller.extend({ ... });
models:
export default DS.Model.extend({ ... });
routes:
export default Ember.Route.extend({ ... });
... they all follow the same structure: they extend some object and export something.
Somebody knows more? Thanks!
I think you are interpreting the export keyword wrong here.
It doesn't mean files are written somewhere else in a different format, but:
if a module (= file) is imported, then things in that file that are exported are available to the importer.
Think of it as making some parts available to other modules, a public API in shorter terms.
Ember files usually only export one thing as there is a strong naming convention making the Ember engine work that way.
This is why if you declare a /user route, it will try to use your routes/user.js, controllers/user.js, and templates/user.hbs files if they exist, without you having to specify anything.
In a similar way, this is what makes a component usable inside a template.
Hence the one-liner export default Ember.Something.extend({ ... }); you find in these files.
However, you can have modules (= files) with multiple export statements in a single file, this is perfectly valid.
// Example from babel website
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
// app.js
import exp, {pi, e} from "lib/mathplusplus";
console.log("e^π = " + exp(pi));
The Learn ES2015 from Babel website has a few examples, and you can read more about the export statement on MDN.
In Ember applications, you will - from my experience - find files with multiple exports mostly in some directories meant to be used by more than one module in the application, or not bound to the Ember engine auto-import, like some utils.
The following example shows an Ember.Controller importing a variable exported from another module:
// utils/messages.js
export var hello = 'Hello!';
export var bye = 'Good Bye!'
// controllers/hello.js
import { hello } from "utils/messages";
export default Ember.Controller.extend({
firstName: 'David',
helloString: Ember.computed('firstName', function(){
return `${hello} ${this.get('firstName')}`;
})
});
I'm currently learning how to develop an app with Vuejs. I have a main.js file with the code for setting up Vue.js. I created a new directory /mixins with a new file api.js. I want to use that as mixin so that every component can use a function to access my api. But I don't know how to do it.
This is my /mixins/api.js file:
export default{
callapi() {
alert('code to call an api');
},
};
This is my main.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import { configRouter } from './routeconfig';
import CallAPI from './mixins/api.js';
// Register to vue
Vue.use(VueResource);
Vue.use(VueRouter);
// Create Router
const router = new VueRouter({
history: true,
saveScrollPosition: true,
});
// Configure router
configRouter(router);
// Go!
const App = Vue.extend(
require('./components/app.vue')
);
router.start(App, '#app');
How can I include my mixin the right way now, so that every component has access to the callapi() function?
If you want to use a mixin on a specific component, rather than all components, you can do it like this:
mixin.js
export default {
methods: {
myMethod() { .. }
}
}
component.vue
import mixin from 'mixin';
export default {
mixins: [ mixin ]
}
Another thing you might consider is using a component extension design pattern i.e. creating a base component and then inheriting from that in sub components. It's a little more involved but keeps code DRY if you have many components sharing many options and perhaps inheriting the template too.
I've written about it on my blog if you're interested.
You can apply mixin globally using Vue.mixin
api.js
------
export default {
methods: {
callapi() {};
}
}
main.js
-------
import CallAPI from './mixins/api.js';
Vue.mixin(CallAPI)
As the documentation states you should use it carefully:
Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.
Just converted my app to ember-cli, but I don't know how to use Ember.Application.register any more because register doesn't seem to be available when Application is started with extend rather than create.
import Ember from 'ember';
import App from 'myapp/app';
var AdminMyController = Ember.ObjectController.extend({
});
// THROWS ERROR HERE BECAUSE register isn't, uh...registered?
App.register('controller:adminMyController', AdminMyController, { singleton: false });
export default AdminMyController;
Previously, because App was a global, I could register this right in the same class.
Am I going to have to move all the register calls to an initializer so I can get access to the app instance?
I belive an initializer would do this for you. You'll need to create an initializers folder in your app directory (same level as controllers, templates, etc). This file should go there.
import Ember from 'ember';
var AdminMyController = Ember.ObjectController.extend({
...
});
export default {
name: 'adminMyController',
initialize: function (container, application) {
container.register('controller:adminMyController', AdminMyController, {singleton: false});
}
};