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.