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({<br />	name: "myapp.Application",<br />	kind: "enyo.Application",<br />	view: "myapp.MainView",<br />	components :[<br />	 			{<br />	 			name: 'router',<br />	 			kind: 'enyo.Router',<br />	 			routes: [<br />	 				{path: 'next', handler: 'nextPage'}<br />	 			],<br />	 			publish: true<br />	 		}<br />	 	],<br /> nextPage : function(){<br />      // new myapp.MainView1().renderInto(document.body);<br /> 	new myapp.Application1();<br /> }<br />});<br />enyo.kind({<br />	name: "myapp.Application1",<br />	kind: "enyo.Application",<br />	view: "myapp.MainView1",	<br />});<br />enyo.ready(function () {<br />	new myapp.Application({name: "app"});<br />});<br />
view.js
enyo.kind({<br />	name: "myapp.MainView",<br />	kind: "FittableRows",<br />	fit: true,<br />	components:[<br />		{kind: "onyx.Toolbar", content: "Hello World"},<br />		{kind: "enyo.Scroller", fit: true, components: [<br />			{name: "main", classes: "nice-padding", allowHtml: true}<br />		]},<br />		{kind: "onyx.Toolbar", components: [<br />			{kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"}<br /><br />		]}<br />	],<br />	create : function(){<br />		this.inherited(arguments);<br />		console.log("MainView is created in memory");<br />	},<br />	rendered : function(){<br />            <br />		this.inherited(arguments);<br />		console.log("MainView is created in rendered into DOM");<br />	},<br />	helloWorldTap: function(inSender, inEvent) {<br />		//this.$.main.addContent("The button was tapped.<br/>");<br />		//window.location="#login";<br />		new myapp.Application().router.trigger({location:'next',change:true});<br />	}<br />});
view1.js
enyo.kind({<br />	name: "myapp.MainView1",<br />	kind: "FittableRows",<br />	fit: true,<br />	components:[<br />		{kind: "onyx.Toolbar", content: "Hai-->>"},<br />		{kind: "enyo.Scroller", fit: true, components: [<br />			{name: "main", classes: "nice-padding", allowHtml: true}<br />		]},<br />		{kind: "onyx.Toolbar", components: [<br />			{kind: "onyx.Button", content: "Go Back", ontap: "helloWorldTap"}<br />		]}<br />	],<br />	create : function(){<br />		this.inherited(arguments);<br />		console.log("MainView1 is created in memory");<br />	},<br />	rendered : function(){<br />            <br />		this.inherited(arguments);<br />		console.log("MainView1 is created in rendered into DOM");<br />	},<br /><br />	helloWorldTap: function(inSender, inEvent) {<br />		//this.$.main.addContent("The button was tapped.<br/>");<br />		//window.location="#";<br />		new myapp.Application().router.trigger({location:'/	',change:true});<br />	}<br />});
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.