enyo js中的事件处理

Question

我想在单击按钮和复选框勾选时执行动态绑定操作，以反映在 class 结果的语句中（名称结果，框容器）

<!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
        
<script src="enyo-master/enyo.js"></script>

 <link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css>

 <link rel="stylesheet" href="button_enyo.css">
      
 <link rel="stylesheet" href="checkbox-sample.css">
 <link rel="stylesheet" href="connect .css">


    /*connect.css*/
     
      .connect .heading1{
     
         padding-left: 450px;
         color: #3BAAFF;
         text-transform: uppercase;
         font-weight: bolder;
         margin-bottom: 31px;
         font-size: 31px;
    }
    .connect .heading2{
     padding-left : 512px;
     color: #5ED4FF;
     text-transform: uppercase;
     font-weight: bold;
     position: absolute;
    }

    .connect .results {
     
     padding: 20px;
     min-height: 24px;
     border-radius: 10px;
     color: #FFF;
     background-color: #555;
     display : inline-block;
     width: 786px;
     
     position : relative;
     left: 134px;
    }
    
   /*button_enyo.css*/

    .button-sample {
     
     padding: 0 20px;
    
     font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
     font-size: 16px;
       margin-top: 85px;
          margin-left: 105px;
     
     
    }
    .button-sample .section {
     padding-top: 20px;
     color: #F49200;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 8px;

    }
    .button-sample button {
     margin: 10px;
    }
    .button-sample .results {
     margin: 20px 0;
     padding: 20px;
     min-height: 24px;
     border-radius: 10px;
     color: #FFF;
     background-color: #555;
    }
    .button-sample .image-button {
     width: 200px;
     height: 100px;
    }

    /*checkbox-sample.css*/

    .checkbox-sample {
     padding: 0 20px;
     font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
     font-size: 16px;
     margin-top: 85px;
        margin-left: 105px;
    }
    .checkbox-sample .section {
     padding-top: 20px;
     color: #F49200;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 8px;
     /*position : absolute;*/
    }
    .checkbox-sample .enyo-checkbox {
     margin: 10px;
    }
    .checkbox-sample .results {
     margin: 20px 0;
     padding: 20px;
     min-height: 24px;
     border-radius: 10px;
     color: #FFF;
     background-color: #555;
     
    }

<!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Connect 2015</title>
      <meta name="description" content="The HTML5 Herald">
      <meta name="author" content="SitePoint">

      <link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css">

      <link rel="stylesheet" href="button_enyo.css">
      
      <link rel="stylesheet" href="checkbox-sample.css">
      <link rel="stylesheet" href="connect .css">

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    </head>

    <body>
      
      <script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
      <script src="enyo-master/enyo.js"></script>
     
 <script>
    enyo.kind({
     name: "enyo.sample.ButtonSample",
     classes: "button-sample",
     components: [
      {content: "Buttons", classes: "section"},
      {kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
      {kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
      {content: "Grouped Buttons", classes: "section"},
      {kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
       {kind: "enyo.Button", content: "Grouped Button 1"},
       {kind: "enyo.Button", content: "Grouped Button 2"},
       {kind: "enyo.Button", content: "Grouped Button 3"}
      ]},
      {content: "Image Button", classes: "section"},
      {kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
       {kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
      //]},
      ]}
      //{name: "results", classes: "results"}
      ],
      
      
     buttonTapped: function(inSender, inEvent) {
      //this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
      this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."});
     },
     buttonToggleTapped: function(inSender, inEvent) {
      this.buttonTapped(inSender, inEvent);
      this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
     },
     groupButtonsActivated: function(inSender, inEvent) {
      if (inEvent.originator.getParent().getActive()) {
       this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
      }
     //},
     },
     updateResult: function(inComponent) {
      this.$.results.destroyClientControls();
      this.$.results.createComponent(inComponent);
      this.$.results.render();
     } 
    }); 
     
     
     enyo.kind({
     name: "enyo.sample.CheckboxSample",
     classes: "checkbox-sample",
     components: [
      {content: "Checkboxes", classes: "section"},
      {kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
      {kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
      {kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
      {content: "Grouped Checkboxes", classes: "section"},
      {kind: "enyo.Group", onActivate: "groupActivated", components: [
       {kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
       {kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
       {kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
      //]},
          ]}
      //{name: "results", classes: "results"}
     //],
     ],
     checkboxChanged: function(inSender, inEvent) {
      this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
     },
     groupActivated: function(inSender, inEvent) {
      if (inEvent.originator.getActive()) {
       this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
      }
     //},
     }
     
     
    });

    //new enyo.sample.ButtonSample().renderInto(document.body);

    enyo.kind({
     name: "connect",
     classes: "connect ",
     components: [
     { content : "CONNECT Signup 2015", classes : "heading1"},
     //{ content : "Please signup for Connect", classes : "heading2"},
     {name: "results", classes: "results"},
     { kind: "enyo.sample.ButtonSample" },
     { kind: "enyo.sample.CheckboxSample" },

    // ]
     ],
    
     
     
    });
    new connect().renderInto(document.body);


   </script>
 </body>
</html>

我想在单击按钮和复选框勾选时执行动态绑定操作，以反映在 class 结果的语句中（名称结果，框容器）

点击button1时，显示应该是button1被点击，单击其他按钮时，应显示它们已被单击；对于复选框，我还必须将触发的操作显示仅组合到该状态结果框。单击选中复选框时，选中一个复选框，即应在删除按钮操作后显示它。

对于两种按钮和复选框的组合，一次在结果上显示一个操作。

Answer 1

您可以使用以下代码实现预期的行为，其中使用公共父级、事件传播和处理在兄弟姐妹之间传递数据。

FIDDLE LINK

 enyo.kind({
    name: "enyo.sample.ButtonSample",
    classes: "button-sample",
    components: [
        {content: "Buttons", classes: "section"},
        {kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
        {kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
        {content: "Grouped Buttons", classes: "section"},
        {kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
            {kind: "enyo.Button", content: "Grouped Button 1"},
            {kind: "enyo.Button", content: "Grouped Button 2"},
            {kind: "enyo.Button", content: "Grouped Button 3"}
        ]},
        {content: "Image Button", classes: "section"},
        {kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
            {kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
        ]}
        ],
    //Custom event
    events: {
        onUpdateResult: "",
    },      
    buttonTapped: function(inSender, inEvent) {
        //Once button tapped, propagate/bubble the event with required data
        this.doUpdateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
    },
    buttonToggleTapped: function(inSender, inEvent) {
      //button tapped 
        this.buttonTapped(inSender, inEvent);
        this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
    },
    groupButtonsActivated: function(inSender, inEvent) {
        if (inEvent.originator.getParent().getActive()) {
            this.doUpdateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
        }
    } 
}); 


    enyo.kind({
    name: "enyo.sample.CheckboxSample",
    classes: "checkbox-sample",
    components: [
        {content: "Checkboxes", classes: "section"},
            {kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
            {kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
            {kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
            {content: "Grouped Checkboxes", classes: "section"},
            {kind: "enyo.Group", onActivate: "groupActivated", components: [
                {kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
                {kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
                {kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
            ]}
    ],
    //Custom event 
    events: {
        onUpdateResult: "",
    },
    checkboxChanged: function(inSender, inEvent) {
    //Propagate the event with required data
        this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
    },
    groupActivated: function(inSender, inEvent) {
        if (inEvent.originator.getActive()) {
            this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
        }
    }


});

enyo.kind({
name: "connect",
classes: "connect ",
components: [
    { content : "CONNECT Signup 2015", classes : "heading1"},
    {name: "results", classes: "results"},
    { kind: "enyo.sample.ButtonSample" },
    { kind: "enyo.sample.CheckboxSample" },
],
//Event handled by common parent, callback executed
handlers: {
  onUpdateResult: "updateResult"
},
//This callback will update the results
updateResult: function(inSender,inEvent) {
    this.$.results.setContent(inEvent.content);
}
});
new connect().renderInto(document.body);

希望对您有所帮助！

enyo js中的事件处理

event handling in enyo js

event-handling

enyo