Enyojs Routing and rendering issue

Question

I am new to Enyo and trying to do mobile web application with router and multiple pages, it is not actually a single page application but we want to maintain different header and footer and content in different pages, so we tried with multiple enyo application.

It is working as expected but the issue is i can see multiple times of rendering the page where its configured in the router. I am not able to find out. I am using enyo 2.5.1.1.

Here is my app.js.

enyo.kind({
name: "myapp.Application",
kind: "enyo.Application",
view: "myapp.MainView",
components :[
{
name: 'router',
kind: 'enyo.Router',
routes: [
{path: 'next', handler: 'nextPage'}
],
publish: true
}
],
nextPage : function(){
// new myapp.MainView1().renderInto(document.body);
new myapp.Application1();
}
});
enyo.kind({
name: "myapp.Application1",
kind: "enyo.Application",
view: "myapp.MainView1",    
});
enyo.ready(function () {
new myapp.Application({name: "app"});
});

view.js

enyo.kind({
name: "myapp.MainView",
kind: "FittableRows",
fit: true,
components:[
{kind: "onyx.Toolbar", content: "Hello World"},
{kind: "enyo.Scroller", fit: true, components: [
{name: "main", classes: "nice-padding", allowHtml: true}
]},
{kind: "onyx.Toolbar", components: [
{kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"}

]}
],
create : function(){
this.inherited(arguments);
console.log("MainView is created in memory");
},
rendered : function(){

this.inherited(arguments);
console.log("MainView is created in rendered into DOM");
},
helloWorldTap: function(inSender, inEvent) {
//this.$.main.addContent("The button was tapped.
");
//window.location="#login";
new myapp.Application().router.trigger({location:'next',change:true});
}
});

view1.js

enyo.kind({
name: "myapp.MainView1",
kind: "FittableRows",
fit: true,
components:[
{kind: "onyx.Toolbar", content: "Hai-->>"},
{kind: "enyo.Scroller", fit: true, components: [
{name: "main", classes: "nice-padding", allowHtml: true}
]},
{kind: "onyx.Toolbar", components: [
{kind: "onyx.Button", content: "Go Back", ontap: "helloWorldTap"}
]}
],
create : function(){
this.inherited(arguments);
console.log("MainView1 is created in memory");
},
rendered : function(){

this.inherited(arguments);
console.log("MainView1 is created in rendered into DOM");
},

helloWorldTap: function(inSender, inEvent) {
//this.$.main.addContent("The button was tapped.
");
//window.location="#";
new myapp.Application().router.trigger({location:'/ ',change:true});
}
});

here whenever i click the "Tap me" in the Mainview , it will load the MainView1. but i can see multiple time the Mainview1 is rendering ,it keeps incrementing 3 times every tap.

Answer 1

It's probably because you're not returning true from the helloWorldTap() handler. That will cause the tap event to continue up the ownership hierarchy and any other components that happen to hear it will run their handlers, as well.

Try just adding return true; at the end and see if it helps.

I might suggest implementing your changing header/footer content based on "pages" to something that better suits a single page app, but if you have multiple apps already running, it might not be worth it.

Answer 2

This is certainly a pathological use case. I don't think it was intended that you would create multiple Application objects that would render into the same document that way (you can render them into separate DOM nodes, but I wouldn't expect you to be able to render two applications into document.body.)

Further, in your tap handler, you're creating another application and then calling its router, which will cause yet another application to be created. It doesn't make sense to create a new Application to call its router. You can just use this.app.router... to access your current App's router.