I am trying to use $navigateTo function inside Vuex actions
_this.$navigateTo is not a function.
Vue.prototype.$navigateTo(Test) is also pointless since you can't navigate between components.
$navigateTo does not exist in Vuex.Store
How to navigate with Vuex actions nativescipt-vue?
import Vue from "vue";
import Vuex from "vuex";
import Test from "./components/Test.vue";
Vue.use(Vuex);
export default new Vuex.Store({
actions: {
go() {
this.$navigateTo(Test);
//Property '$navigateTo' does not exist on type 'Store<unknown>'.
}
}
});
Please check out my repo
It navigates to test page even it has an empty password
https://github.com/kaanguru/vuexnavigate
https://nativescript-vue.org/en/docs/routing/manual-routing/#navigatetocomponent-options
It turns out Vue.prototype.$navigateTo(Test) was the correct answer
Vue.prototype.$navigateTo(Test) is also pointless since you can't navigate between components.
No, it's not pointless you can navigate between components.
Related
I am brand new to EmberJS, and am going through a tutorial. I am at the part of the tutorial that starts talking about creating services and injecting them into your controllers (I'm not 100% sure if its a controller, but I'm coming from AngularJS, and it seems pretty similar).
In the terminal in my Ember project, I run the command ember g service authentication. I can see that the service was created in the services directory of my app in the file authentication.js. When I try injecting it into my controller however, I get this issue in the browser when I serve up the app locally,
Error: Assertion Failed: Attempting to inject an unknown injection: 'service:authentication
Could this be because I am using a version of Ember that is newer than in the tutorial, and there is a different way to inject services now? I ask that because this is the syntax of the service in the tutorial
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
and this is the syntax of what I have now, auto-created when the project was built with ember new
import Service from '#ember/service';
export default Service.extend({
records: []
});
org.js "Where service is being injected"
import Route from '#ember/routing/route';
export default Route.extend({
authentication: Ember.inject.service(),
setupController(controller) {
this._super(...arguments);
}
});
Thanks you everyone for all the information about EmberJS.However It turns out all I needed to do was restart my local server -.-
In ember version 2.16, you can leverage javascript module api for importing.
Refer this blog post
Refer this full list
if your ember version is below 2.16, then
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
if ember version is >= 2.16 then the below is the right way to import,
import Service from '#ember/service';
export default Service.extend({
records: []
});
Looks like you are using Ember 2.16 (as others have answered it uses the new components modularization and the tutorial you are following looks like 2.15 or prior, as you have also mentioned in your post).
It makes sense that you should use new modules in your new route too:
import Route from '#ember/routing/route';
import { inject as service } from "#ember/service";
export default Route.extend({
authentication: service()
});
One acclaration: the code you are showing is a route class (there are controllers on the route hierarchy, and also there are components that are not part of the route hierarchy). You will be able to inject your brand-new service in any of the mentioned levels.
I have just started working with ember2.5.1. I wanted to try and create an easy service, and have a component implement it. The problem is that the service is always undefined, and I can't seem to call its methods.
/components/status-component.js
import Ember from 'ember';
export default Ember.Component.extend({
logger: Ember.inject.service(),
actions: {
test() {
this.get('logger').log("testing");
}
}
});
/services/logger.js
import Ember from 'ember';
export default Ember.Service.extend({
log(message) {
console.log(message);
}
});
Other information: I also attempted making routable components, and I'm not sure if that's messing up the services? I essentially have a route pointing to a dummy status-proxy-component.hbs which has the {{status-component}} within it. status-component.hbs is another file.
Any idea why this might not be working? Am I just plain out missing something from services, or is the proxy messing it up?
You must use the get() function to get component properties.
this.get('logger').log("testing");
I had the same problem with Ember 2.4.2; the service was defined in the correct location and would appear in the ember build output, but not in my running ember serve.
The problem turned out to be the hot reloading not picking up on the new service. Killing the server and re-running ember serve allowed the service to work normally.
I am using Ember.js 2.3 (and Ember-Data 2.3). I'm setting up a simple user auth process using Auth0. Nothing fancy yet, just installed Auth0 according to:
https://auth0.com/docs/quickstart/spa/ember2js/no-api
Now, my setup is pretty much exactly the same as the project given here. However, it seems that I can only access the session from application.hbs and not any other template. Or route. Or anything else.
So this handlebars snippet:
{{#if session.isAuthenticated}}
{{session.data.authenticated.profile.name}}
{{else}}
NOPE
{{/if}}
This works on application.hbs, but nowhere else. This does not make sense to me. If Auth0 itself says that session.data can be accessed from any template, and that such a handlebars snippet even exists, there must be something I'm missing. I need to be able to show certain portions of the client side as well as restrict some actions based on the currently signed-in user (and whether someone is actually signed in ), all of which are included in the session.data object.
It doesn't seem appropriate to pass this object to every component I'm going to create, and the only way I can think of getting this data right now is to manually get it from localStorage. I could perhaps make this manual process a mixin and have it included everywhere but before I try to find roundabout solutions, I want to make sure that I'm not missing something in the implementation itself.
How would I be able to access the session token throughout the application aside from application.hbs itself?
EDIT: Updating question in response to comments. My protected route looks like this:
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
});
I am still unable to get session data, unfortunately.
In ember-simple-auth session is a service which You need to inject to the other routes. So if you want to use the session data other than the application template, you need to extend those routes with AuthenticatedRouteMixin
(just like you did in routes/home.js). In controllers you need to inject the service, for example:
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
session: Ember.inject.service('session')
…
});
Take a look at ember-simple-auth.
You can find another implementation if you check ember-simple-auth-token
Edit:
Try this in your routes/protected_route.js (it works for me)
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin, {
session: Ember.inject.service('session'),
actions: {
invalidateSession: function() {
this.get('session').invalidate();
}
}
});
How to specify which controller to use in a route in ember 2.0?
Default is that each route has its own controller and if I don't have code for a controller then a default empty controller is generated at runtime.
I want to specify that several routes share the same controller (and model). I see that in the documentation to an older version of ember it is possible to specify the controller with the "controllerName" property in the routes definition but that part of the documentation has been removed for the lastest ember version. And when I test the controllerName property it doesn't work.
It's not exactly what you are looking for but you could extend the controller that you want to use on the other routes.
import FooIndexController from 'ember-app/foo/index/controller';
export default FooIndexController.extend({});
You may also consider a mixin if you have a lot of code that should be shared by many controllers. It can be a much cleaner solution.
import Ember from 'ember';
import BaseController from 'ember-app/mixins/base-controller';
export default Ember.Controller.extend(BaseController, {
// Code specific to _this_ controller lives here
});
I figured it out. It turns out controllerName does work after all.
I just did this:
// route/home/books/book/details
import Ember from 'ember';
export default Ember.Route.extend({
controllerName: "home/books/book/index",
});
Then book and book/details shares controller. They already share model because the details route is a sub-route of book. So it works nicely.
I added some configurations to myapp/config/environment:
if (environment === 'development') {
ENV.APP.AuthURL = 'http://localhost:5000/';
}
Now, to access this configuration should I use some method or directly accessing window.Myapp?
You can access it by importing environment.js using the line below:
import config from '../config/environment';
For example, lets say you want to access your configuration in a controller. This is what it would look like:
import Ember from 'ember';
import config from '../config/environment';
export default Ember.Controller.extend({
foo: config.APP.AuthURL
});
If you need to, you can now access it in your controller's template using:
{{foo}}
There are a couple modern ways, as of this writing, when trying to access it from your application:
import ENV from 'your-application-name/config/environment';
your-application-name should be what's in the modulePrefix key of config/environment.js and the name key of package.json
Via Ember.getOwner(this).resolveRegistration('config:environment');
Number one assumes you're using Ember CLI and is detailed in the ember docs under Configuring Your App:
Ember CLI ships with support for managing your application's
environment. Ember CLI will setup a default environment config file at
config/environment. Here, you can define an ENV object for each
environment, which are currently limited to three: development, test,
and production.
The ENV object contains three important keys:
EmberENV can be used to define Ember feature flags (see the Feature Flags guide).
APP can be used to pass flags/options to your application instance.
environment contains the name of the current environment (development,production or test).
You can access these environment variables in your application code by importing from your-application-name/config/environment.
While #rog's answer is correct and will work for all cases where you are trying to access the config from your application there are some edge cases (such as accessing config from an addon) that it will not work for.
I would recommend checking out the ember-get-config addon: https://www.emberobserver.com/addons/ember-get-config
Once you install ember-get-config you can import your config using the following code:
import config from 'ember-get-config';
const { AuthURL } = config;
// now you have access to AuthURL 🎉
This will work in your application and it will also work if you build an addon that will be consumed by your application 👍