Enyojs 路由和渲染问题

Question

我是 Enyo 的新手，正在尝试使用路由器和多个页面做移动 Web 应用程序，它实际上不是一个单页面应用程序，但我们希望在不同页面中维护不同的页眉和页脚和内容，所以我们尝试了多个 enyo应用。

它按预期工作，但问题是我可以看到多次渲染在路由器中配置的页面。我无法找出答案。我正在使用 enyo 2.5.1.1。

这是我的 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});
}
});

每当我在 Mainview 中单击“点击我”时，它都会加载 MainView1。但我可以看到 Mainview1 多次渲染，每次点击它都会增加 3 次。

Answer 1

这可能是因为您没有从 helloWorldTap() 处理程序返回 true。这将导致点击事件在所有权层次结构中继续上升，并且任何其他碰巧听到它的组件也将运行它们的处理程序。

尝试在末尾添加return true;，看看是否有帮助。

我可能会建议您将基于“页面”的页眉/页脚内容更改为更适合单页应用程序的内容，但如果您已经运行了多个应用程序，则可能不值得。

Answer 2

这当然是一个病态的用例。我不认为你会创建多个应用程序对象以这种方式呈现到同一个文档中（你可以将它们呈现到单独的 DOM 节点中，但我不希望你能够将两个应用程序呈现到文档中.body.)

此外，在您的点击处理程序中，您正在创建另一个应用程序，然后调用它的路由器，这将导致另一个应用程序被创建。创建一个新的应用程序来调用它的路由器是没有意义的。您可以使用this.app.router... 访问您当前应用的路由器。