Enyojs路由和渲染问题

时间:2016-02-24 17:48:56

标签: javascript routing mobile-website enyo

我是Enyo的新手并尝试使用路由器和多个页面进行移动Web应用程序,它实际上不是单页应用程序,但我们希望在不同的页面中维护不同的页眉和页脚和内容,因此我们尝试使用多个enyo应用

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

这是我的app.js。

Private Sub CreateComboArray(ByVal number As Integer, ByVal container As Control)

    Dim position As Integer = 7
    Dim combo As ComboBox
    For i As Integer = 0 To number - 1

        combo = New ComboBox()
        combo.Name = "combo" + i.ToString()
        combo.Height = 22
        combo.Width = 90
        combo.text = i.ToString()
        container.Controls.Add(combo)
        combo.Left = position
        position += 95
    Next

End Sub

Private Sub Button7_Click(sender As Object, e As EventArgs) Handles Button7.Click
    CreateComboArray(10, TabControl1)
End Sub

view.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"});
});

view1.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});
}
});

每当我点击主视图中的“点按我”时,它都会加载MainView1。但是我可以看到Mainview1正在渲染多次,它每次点击都会增加3次。

2 个答案:

答案 0 :(得分:0)

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

尝试在最后添加return true;,看看是否有帮助。

我可能会建议您根据"页面"实施更改页眉/页脚内容。对于更适合单页应用程序的东西,但如果你已经有多个应用程序在运行,那可能就不值得了。

答案 1 :(得分:0)

这当然是病态用例。我不认为您打算创建多个Application对象,这些对象将以相应的方式呈现到同一文档中(您可以将它们渲染到单独的DOM节点中,但我不希望您能够渲染两个应用程序到document.body。)

此外,在您的点按处理程序中,您将创建另一个应用程序,然后调用其路由器,这将导致另一个应用程序被创建。创建一个新的应用程序来调用其路由器没有意义。您只需使用>>> D = {'a': 'b', 'b': 'd', 'c': 'd', 'd': 'f'} >>> res = {} >>> for k in D: ... res[k] = [j] = [D[k]] ... while j in D: ... j = D[j] ... res[k].append(j) ... >>> res {'b': ['d', 'f'], 'c': ['d', 'f'], 'd': ['f'], 'a': ['b', 'd', 'f']} 即可访问当前应用的路由器。