I've got the following code
$ ->
class MainLayout extends Marionette.Layout
template: Handlebars.compile $("#main_layout_hb").html()
regions:
header : "#header"
options : "#options"
footer : "#footer"
class MainRegion extends Marionette.Region
el:"#main_wrap"
class App extends Marionette.Application
main_region : new MainRegion
main_layout : new MainLayout
onStart: =>
#main_region.show(#main_layout)
# start the backbone history for URL routing
if Backbone.history
Backbone.history.start()
app = new App
app.start()
I'm trying to follow the example on this page https://github.com/marionettejs/backbone.marionette/wiki/The-relationship-between-regions-and-layouts
But when I run the code, I don't get the template "#main_layout_hb" inserted into the region. What's going on there?
You should create your App's region using the addRegions method:
App.addRegions
main_region: "#main_wrap"
Related
I'm building an app with Next. using nested dynamic routing. In development mode, everything works as expected. But when I deploy the app in production ,When you hit reload (like F5) it gives you 404
use next version : 9.5.2
my directory structure is like this:
pages
-users
-[page]
- [id].tsx
- index.tsx
-index.tsx
Here's how I link to the dynamic page:
<Link href='/users/[page]/[id]' as='/users/edit/${id}'>
<a>Edit</a> </Link>
Here sample code user/[page]/[id].tsx
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
},
};
static getInitialProps({query}) {
return {query}
}
async componentDidMount(){
const { query } = this.props;
if(query?.id){
await this.props.getUserById(query?.id);
}
}
}
Here static build command
`npm run export`
Here static build
my build is a set of HTML, js, css assets I hosted on the web server (Apache, Nginx).
If I clicked in link users from index.tsx page, my URL look '/users/edit/1/' and work fine, but if I refresh the page I get error 404. In the development mode refresh page, everything works fine.
I am stuck on this problem for many days. Do u know how I can fix this?
I have gone through the git for SecureLS, but I find it difficult to define SecureLS in React.
var ls = new SecureLS({ encodingType: 'aes' })
How can I define like this in React.js class component?
With React class components, you can create instances of class within componentDidMount method in class components and store it in class variable
class App extends React.Component {
componentDidMount() {
this.ls = new SecureLS({ encodingType: 'aes' })
}
}
Now you can use ls anywhere in your class with this.ls
P.S. Do keep in mind context issues whenever you use this.ls in class functions. The this inside class functions must refer to the class instance
I am working on an react terminal app using xtermjs 3.14 before, and it's working ok. But when I want to update it to xtermjs 4.1.0 and add new addons, it's broken and reply different types errors. I follow the steps from the release notes.
import {Terminal} from 'xterm';
import {FitAddon} from 'xterm-addon-fit';
var term = new Terminal({cursorBlink: true});
var fitAddon = new FitAddon();
term.loadAddon(fitAddon)
class TerminalPage extends Component {
componentDidMount(){
term.open(document.getElementById('terminal'));
}
}
terminalapp startup failed TypeError: R.on is not a function
or
x is not defined
In AngularJS 1 we simply add ng-app at top of the HTML tag and bind services to change metadata on the fly.
But in Angular2 the quickstart app in official site made index.html completely static (css, meta, ...), only left app tag to bind with bootstrap()
Now how we can do when we want to build many panel with different style and js plugins, meta keyword...
update
There is now also the Meta service that allows to modify meta tags
https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html
original
There is currently no support built in in Angular. There is an open issue though for (almost) full support of meta tags and other stuff in <head>.
Currently there is only built-in support for the <title> tag using the Title service.
constructor(private title:Title) {
}
updateTitle(title:string) {
this.title.setTitle(title);
console.log(this.title.getTitle());
}
I have just released #ngx-meta/core plugin, using that you can add meta information inside the data property of routes:
const routes = [
{
path : 'home',
component : HomeComponent,
data : {
meta : {
title : 'Sweet home',
description : 'Home, home sweet home... and what?',
}
}
},
{
path : 'duck',
component : DuckComponent,
data : {
meta : {
title : 'Rubber duckie',
description : 'Have you seen my rubber duckie?',
}
}
},
{
path : 'toothpaste',
component : ToothpasteComponent,
data : {
meta : {
title : 'Toothpaste',
override : true, // prevents appending/prepending the application name to the title attribute
description : 'Eating toothpaste is considered to be too healthy!',
}
}
}
...
];
If you want to override values supplied at the route configuration, it's possible to set meta information programmatically - just in the component class:
...
import { Component, OnInit } from '#angular/core';
import { MetaService } from '#ngx-meta/core';
...
#Component({
...
})
export class ItemComponent implements OnInit {
...
constructor(private metaService: MetaService) { }
...
ngOnInit() {
this.item = //HTTP GET for "item" in the repository
this.metaService.setTitle(`Page for ${this.item.name}`);
this.metaService.setTag('og:image', this.product.imageUrl);
}
}
You can find detailed instructions at #ngx-meta/core github repository. Also, source files might be helpful to introduce a custom logic.
I'm working on an angular app using play framework for my rest-services. Everything in the public folder is an angular app (stylesheets, javascripts, images and html). I want every request that is not for something in the stylesheets, javascripts, templates or images folder to be routed to the index.html page. This is so that angular routing can take over from there...
As a side note i can mention that I am going to place every restservice under /services/ which links to my own java controllers.
Is it possible in play framework 2.3.4 to define a route that catches all without having to use the matching elements?
This is my route defs so far:
GET / controllers.Assets.at(path="/public", file="index.html")
GET /stylesheets/*file controllers.Assets.at(path="/public/stylesheets", file)
GET /javascripts/*file controllers.Assets.at(path="/public/javascripts", file)
GET /templates/*file controllers.Assets.at(path="/public/templates", file)
GET /images/*file controllers.Assets.at(path="/public/images", file)
#this line fails
GET /* controllers.Assets.at(path="/public", file="index.html")
It's not possible to omit usage of matching elements but you can route a client via controller. The route definition looks like this:
GET /*path controllers.Application.matchAll(path)
And the corresponding controller can be implemented as follows:
public class Application extends Controller {
public static Result matchAll(String path) {
return redirect(controllers.routes.Assets.at("index.html"));
}
}
Update
If you don't want to redirect a client you can return a static resource as a stream. In this case a response MIME type is required.
public class Application extends Controller {
public static Result matchAll(String path) {
return ok(Application.class.getResourceAsStream("/public/index.html")).as("text/html");
}
}
For this task you can use onHandlerNotFound in Global class which will render some page without redirect:
import play.*;
import play.mvc.*;
import play.mvc.Http.*;
import play.libs.F.*;
import static play.mvc.Results.*;
public class Global extends GlobalSettings {
public Promise<Result> onHandlerNotFound(RequestHeader request) {
return Promise.<Result>pure(notFound(
views.html.notFoundPage.render(request.uri())
));
}
}
Answer for scala developers using playframework :)
Similar to above one about creating controller which will accept parameters and then omit them.
Example routing:
GET / controllers.Assets.at(path="/public", file="index.html")
GET /*ignoredPath ui.controller.AssetsWithIgnoredWildcard.at(path="/public", file="index.html", ignoredPath: String)
controller with assets injected by framework:
class AssetsWithIgnoredWildcard #Inject() (assets: Assets) {
def at(
path: String,
file: String,
wildcardValueToIgnore: String,
aggressiveCaching: Boolean = false): Action[AnyContent] = {
assets.at(path, file, aggressiveCaching)
}
}