Is there something like url_for in rails to implement:
url_for controller: CONTROLLER, action: ACTION, arg_1: ARG1, arg_2: ARG2 generates link /CONTROLLER_PATH/ACTION?arg_1:ARG1&arg_2:ARG2?
Related
I'm creating a unit test for a Vue component (inside a Nuxt app) like this:
<template>
<BaseHeader>
...
<LazyHydrate when-visible>
<LazyNewsletter />
</LazyHydrate>
</BaseHeader>
</template>
<script>
import BaseHeader from '#acme/components/BaseHeader/BaseHeader.vue'
import Newsletter from '#/components/Newsletter/Newsletter.vue'
export default {
name: 'TheHeader',
components: {
BaseHeader,
Newsletter
},
}
</script>
but I'm getting this warning in the console when running the test:
console.error
[Vue warn]: Unknown custom element: <LazyHydrate> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
LazyHydrate is a component from the package vue-lazy-hydration and it's already configured in the nuxt app.
Does anyone know what's happening here?
T.I.A.
I tried to use mount instead of shallowMount, but I get the same error.
In emberjs, I am in a situation that my application already has routes template that uses the application.hbs template, but now I want to create a new route templates that doesn't use application.hbs.
Is there any easy solution for that?
I have seen many answers but that doesn't match my specification and also my version of ember is 2.11.
Thank you.
Keep application.hbs as minimal and common across all routes as you can. What you shoud do is generate top level routes for your application.
Say you have a common setup where you have an authenticated section, post login, and a login section. It is common for pre and post login to have differing top level templates. Try something like this:
ember g route login
ember g route login/index
ember g route login/forgot-password
ember g route authenticated
ember g route authenticated/index
ember g route authenticated/profile
etc...
Your login.hbs would have its own style, and potentially child routes, which will assume that style and place subsequent nested templates in the {{outlet}} that others have mentioned.
File Structure:
routes/
-login/
----index.hbs
----forgot-password.hbs
-authenticated/
----index.hbs
----profile.hbs
login.hbs
authenticated.hbs
application.hbs
In the example above, login.hbs might look like this:
{{yellow-navbar}}
{{outlet}}
and authenticated.hbs like this:
{{pink-navbar}}
{{user.name}}
{{outlet}}
Now, the login/index.hbs and login/forgot-password.hbs templates will render in the login.hbs outlet. both of these pages will render a yellow navbar, and then their own content.
Because authenticated.hbs is another top level parent route, both authenticated/index.hbs and authenticated/profile.hbs will render their content beneath a pink navbar and a display of the current user's name.
if your application.hbs looked like this:
{{#general-site-container}}
<h2>Website Name</h2>
{{outlet}}
{{/general-site-container}}
Then all of the routes, both authenticated and login, will be in the general-site-container, and will all show the h2 with the website name.
An important note in this, and something that I see a lot of people get confused with, is that this folder structure does not dictate the actual path of the route.
The router might be configured like this, to avoid showing "authenticated" in the url:
Router.js
// login.index route assumed at root url /login
this.route('login', { path: '/login' }, function() {
// avail at /login/forgot-password
this.route('forgot-password', { path: '/forgot-password' }
});
//authenticated.index.hbs assumed at root avail at /
//notice that the authenticated parent route has a route of "/"
this.route('authenticated', { path: '/' }, function() {
// authenticated.profile route avail at /profile
this.route('profile', { path: '/profile' });
// as an exmaple you can further nest content to your desire
// if for instance your profile personal info section has a parent
// template/route
this.route('', { path: '/personal-info' }, function() {
this.route('address', { path: '/address' }); //profile/personal-info/address
});
});
i think you need to use {{outlet}} for achieve this.
create diffrent outlets where you need to show diffrent templates by overriding application template
{{outlet}} //application hbs default one
{{outlet "view1"}} // another template
{{outlet "view2"}} //another template
there should be view1.hbs and view2.hbs in order to render those templates
I want to add the component's name to the URL in Ember js.
Example:
If the main URL is : localhost:4200/home ,
then in home,if I call/redirect to a component(say - abc), the URL should get appended:
localhost:4200/abc
or
localhost:4200/home/abc
If the main URL is : localhost:4200/home , then in home,if I
call/redirect to a component(say - abc), the URL should get appended:
How do you call/redirect to a component in ember?. If you got some hacky way to do that, then I will encourage you not to do this.
In Ember, the router matches the current URL to the routes that you've defined.
If you got /home/abc URL path, it means you have abc route nested inside home route.
Router.map(function() {
this.route('home', function() {
this.route('abc');
});
});
If you know all routes will come under home route, then you can define it manually. Suppose if you don't know or what will come , then go for defining the dynamic segments in URL.
You can do it by {{component}} helper.
You need to define dynamic path for home and send the component name from url to home controller by model hook.
Below are essential parts of the solution.
//router.js
this.route('home', {path: 'home/:cmp'});
//routes/home.js
model(params){
return params.cmp;
}
//templates/home.hbs
{{component model}}
Please take a look at this tiwddle
I'm trying to change the roolURL in an Ember CLI app. This is easy in a basic Ember app:
App.Router.reopen({
rootURL: '/blog/'
});
Doing this in an Ember CLI app throws the following exception:
Uncaught TypeError: Cannot read property 'reopen' of undefined
The reason why I'd like to do this is that I'm going to have multiple Ember CLI apps inside of a rails app. The URLs will look something like this:
/ --> rails
/foo --> rails
/api --> rails
/admin --> Ember CLI
/blog --> Ember CLI
You'd want to update your config/environment.js as follows:
module.exports = function(environment) {
var ENV = {
environment: environment,
baseURL: '/blog/'
see http://www.ember-cli.com/#deployments for environment specific configurations.
I am trying to verify that the session object is available in my ember app. I've used ember-cli to generate the app and I've followed the ember-auth installation instructions. The instructions say "add the Ember CLI Addon to your project and Ember Simple Auth will setup itself".
npm install --save-dev ember-cli-simple-auth
Unfortunately when I am in my controller there is no session object.
I have also tried loading the initalizer in my app.js but I have yet to figure out how to access App.session from my controller. I think ember-cli has namespaced things differently.
//app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'ember-test', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'ember-test');
loadInitializers(App, 'simple-auth');
export default App;
//about.js
import Ember from 'ember';
export default Ember.Controller.extend({
derp: 'derpvalue',
actions: {
test : function(){
console.log("In test");
console.log(session);
console.log(App.session);
debugger;
}
}
});
Here are recent ember-cli-simple-auth setup instructions from the author
You shouldn't have to manually set up an initializer. And I can verify that the author's instructions should give you this.session in your controller.
Copying the author's instructions:
Installing Ember Simple Auth in an ember-cli project is really easy now. All you have to do is install the ember-cli addon from npm:
npm install --save-dev ember-cli-simple-auth
This will install Ember Simple Auth’s AMD distribution into the project, register the initializer so Ember Simple Auth automatically sets itself up and add itself as a dependency to the project’s package.json.
You can add a login route and login/logout links to verify it all actually works:
// app/router.js
…
Router.map(function() {
this.route('login');
});
…
// app/templates/application.hbs
…
{{#if session.isAuthenticated}}
<a {{ action 'invalidateSession' }}>Logout</a>
{{else}}
{{#link-to 'login'}}Login{{/link-to}}
{{/if}}
…
Also implement the ApplicationRouteMixin in the project’s application route:
// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin);
Setting up authentication
To actually give the user the option to login, we need to add an authentication package for Ember Simple Auth. Let’s assume you have an OAuth 2.0 compatible server running at http://localhost:3000. To use that, install the OAuth 2.0 extension library which again is as easy as installing the package from npm:
npm install --save-dev ember-cli-simple-auth-oauth2
Like the ember-cli-simple-auth package this will setup itself so that nothing else has to be done in order to use the OAuth 2.0 functionality.
The OAuth 2.0 authentication mechanism needs a login form, so let’s create that:
// app/templates/login.hbs
<form {{action 'authenticate' on='submit'}}>
<label for="identification">Login</label>
{{input id='identification' placeholder='Enter Login' value=identification}}
<label for="password">Password</label>
{{input id='password' placeholder='Enter Password' type='password' value=password}}
<button type="submit">Login</button>
</form>
Then implement the LoginControllerMixin in the login controller and make that use the OAuth 2.0 authenticator to perform the actual authentication:
// app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:oauth2-password-grant'
});
As the OAuth 2.0 authenticator would by default use the same domain and port to send the authentication requests to that the Ember.js is loaded from you need to configure it to use http://localhost:3000 instead:
// config/environment.js
if (environment === 'development') {
…
ENV['simple-auth-oauth2'] = {
serverTokenEndpoint: 'http://localhost:3000/token'
}
…
As ember-cli adds all configuration to the global ENV variable (e.g. in this case MyAuthAppENV) which Ember Simple Auth cannot use as it doesn’t know it’s name, you need to copy that to window.ENV so Ember Simple Auth can use it:
// app/initializers/simple-auth-config.js
export default {
name: 'simple-auth-config',
before: 'simple-auth',
initialize: function() {
window.ENV = MyAuthAppENV;
}
};
Ember Simple Auth is awesome!