enyo js中的事件处理

时间：2015-04-30 05:36:32

标签： event-handling enyo

我想在单击按钮和复选框时执行动态绑定操作，一起反映在类结果的声明中（名称结果，框容器）

<!--[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>

我想在单击按钮和复选框时执行动态绑定操作，一起反映在类结果的声明中（名称结果，框容器）

点击button1，点击按钮1， 点击其他按钮，显示应该被点击; 对于复选框，我还必须将触发的操作显示组合到该staement-result框中。点击勾选复选框，点击复选框一，即删除按钮操作后应显示。

一次结果显示一个动作，用于组合两种按钮和复选框。

1 个答案:

答案 0 :(得分：0)

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

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);

希望有所帮助！

相关问题
最新问题