Having issue with Router and render

edited February 2016 in Enyo 2.5
Hello,
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 . Please help me to fix this issue.
Thanks!!.

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.<br/>");
//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.<br/>");
//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.








Comments

  • Any one can help me to resolve this issue?
  • Short answer: Don't do that. It's rendering multiple times (as mentioned on StackOverflow), because you're creating new applications multiple times for each set of events.
  • edited February 2016
    You probably don't want to use enyo.Application to manage the sub-apps. You can just use regular controls and render them into your main Application as needed (by setting them as the view).
Sign In or Register to comment.