1

我尝试在 enyo 中创建自己的类型

enyo.kind(
{
    name: "DeviceButton",
    kind: "Button",
    caption: "",
    published: { userAgent: "" },
    flex: 1,
    onclick: "butclick",
    butclick: function() { console.log("User agent changed to " + this.userAgent) }
})

但是当我点击时没有显示任何内容

如果我刚刚

onclick: console.log("User agent changed to " + this.userAgent)

打印出 this.userAgent 未定义

我究竟做错了什么？

顺便说一句，是否可以通过 onclick 发送参数（以便响应点击的函数获取变量）

谢谢

4

2 回答 2

2

您在这里遇到的问题是 onclick 属性实际上是为 Enyo 提供事件处理程序的名称，以便在收到点击时将事件发送到。“butclick”事件不会发送到 DeviceButton，而是发送到其父级。

如果您想完全在您的同类中处理事件，那么您需要将其设置为“处理程序”。在 Enyo 2.x 中，您可以这样做：

enyo.kind(
{
    name: "DeviceButton",
    kind: "Button",
    caption: "",
    published: { userAgent: "" },
    flex: 1,
    handlers {
      onclick: "butclick"
    },
    butclick: function() { console.log("User agent changed to " + this.userAgent) }
})

在 Enyo 1.x 中，您只需将处理函数命名为“onclickHandler”。我提到 Enyo 1 解决方案是因为我看到您的定义中有“flex: 1”。Enyo 2 不支持 Flexbox，我们有一个“Fittable”系统来代替。

于 2012-11-02T20:55:19.063 回答
0

我为您做了一个小例子，enyo 如何处理与自定义类型之间的发送和接收值。我还在代码中添加了一些简短的注释。

http://jsfiddle.net/joopmicroop/K3azX/

enyo.kind({
    name: 'App',
    kind: enyo.Control,
    components: [
        {kind:'FittableRows', components:[
            // calls the custom kind by it's default values
            {kind:'DeviceButton',name:'bttn1', classes:'joop-btn',ontap:'printToTarget'},
            // calls the custom kind and pass the variables to the DeviceButton kind
            {kind:'DeviceButton', name:'bttn2', btnstring:'Get Agent', useragent:'chrome', classes:'joop-btn', ontap:'printToTarget'},
            {tag:'div', name:'targetContainer', content:'no button clicked yet', classes:'joop-target'},
        ]},                
    ],
    printToTarget:function(inSender, inEvent){
        // inSender = the button that was pressed
        this.$.targetContainer.setContent(inSender.name+' has used the value: "'+inSender.getUseragent()+'" and sends the value of: "'+inSender.getValueToPrint()+'" back.');  
    },

});

enyo.kind({
    name:'DeviceButton',
    kind:enyo.Control,
    components:[
        {kind:'onyx.Button',name:'btn', ontap:'printUsrAgent'}
    ],
    published:{
        btnstring:'default btnstring', // value that will be received
        useragent:'default useragent',  // value that will be received
        valueToPrint:'default valueToPrint' // value that will be used 
    },
    rendered:function(){
        this.inherited(arguments);
        this.$.btn.setContent(this.btnstring);
    },
    printUsrAgent:function(inSender,inEvent){
        // set a parameter with the value that was received of if not received use the default value (normaly would do some calculations with it first)
        this.valueToPrint = this.useragent+' after changes'; 
    },
});
​
于 2012-11-01T01:18:51.250 回答