2015-04-30 63 views
0

我想上的按钮点击执行动态绑定操作和复选框蜱一起以反映在一流的成果(名结果,箱集装箱)事件enyo处理的js

<!--[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{ 
 
    \t padding-left : 512px; 
 
    \t color: #5ED4FF; 
 
    \t text-transform: uppercase; 
 
    \t font-weight: bold; 
 
    \t position: absolute; 
 
    } 
 

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

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

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

 
    /*checkbox-sample.css*/ 
 

 
    .checkbox-sample { 
 
    \t padding: 0 20px; 
 
    \t font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif; 
 
    \t font-size: 16px; 
 
    \t margin-top: 85px; 
 
     margin-left: 105px; 
 
    } 
 
    .checkbox-sample .section { 
 
    \t padding-top: 20px; 
 
    \t color: #F49200; 
 
    \t text-transform: uppercase; 
 
    \t font-weight: bold; 
 
    \t margin-bottom: 8px; 
 
    \t /*position : absolute;*/ 
 
    } 
 
    .checkbox-sample .enyo-checkbox { 
 
    \t margin: 10px; 
 
    } 
 
    .checkbox-sample .results { 
 
    \t margin: 20px 0; 
 
    \t padding: 20px; 
 
    \t min-height: 24px; 
 
    \t border-radius: 10px; 
 
    \t color: #FFF; 
 
    \t background-color: #555; 
 
    \t 
 
    }
<!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({ 
 
    \t name: "enyo.sample.ButtonSample", 
 
    \t classes: "button-sample", 
 
    \t components: [ 
 
    \t \t {content: "Buttons", classes: "section"}, 
 
    \t \t {kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"}, 
 
    \t \t {kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"}, 
 
    \t \t {content: "Grouped Buttons", classes: "section"}, 
 
    \t \t {kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [ 
 
    \t \t \t {kind: "enyo.Button", content: "Grouped Button 1"}, 
 
    \t \t \t {kind: "enyo.Button", content: "Grouped Button 2"}, 
 
    \t \t \t {kind: "enyo.Button", content: "Grouped Button 3"} 
 
    \t \t ]}, 
 
    \t \t {content: "Image Button", classes: "section"}, 
 
    \t \t {kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [ 
 
    \t \t \t {kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"} 
 
    \t \t //]}, 
 
    \t \t ]} 
 
    \t \t //{name: "results", classes: "results"} 
 
    \t \t ], 
 
    \t \t 
 
    \t \t 
 
    \t buttonTapped: function(inSender, inEvent) { 
 
    \t \t //this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."}); 
 
    \t \t this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."}); 
 
    \t }, 
 
    \t buttonToggleTapped: function(inSender, inEvent) { 
 
    \t \t this.buttonTapped(inSender, inEvent); 
 
    \t \t this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button"); 
 
    \t }, 
 
    \t groupButtonsActivated: function(inSender, inEvent) { 
 
    \t \t if (inEvent.originator.getParent().getActive()) { 
 
    \t \t \t this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."}); 
 
    \t \t } 
 
    \t //}, 
 
    \t }, 
 
    \t updateResult: function(inComponent) { 
 
    \t \t this.$.results.destroyClientControls(); 
 
    \t \t this.$.results.createComponent(inComponent); 
 
    \t \t this.$.results.render(); 
 
    \t } 
 
    }); \t 
 
    \t 
 
    \t 
 
    \t enyo.kind({ 
 
    \t name: "enyo.sample.CheckboxSample", 
 
    \t classes: "checkbox-sample", 
 
    \t components: [ 
 
    \t {content: "Checkboxes", classes: "section"}, 
 
    \t \t {kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"}, 
 
    \t \t {kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"}, 
 
    \t \t {kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"}, 
 
    \t \t {content: "Grouped Checkboxes", classes: "section"}, 
 
    \t \t {kind: "enyo.Group", onActivate: "groupActivated", components: [ 
 
    \t \t \t {kind: "enyo.Checkbox", content: "Grouped Checkbox 1"}, 
 
    \t \t \t {kind: "enyo.Checkbox", content: "Grouped Checkbox 2"}, 
 
    \t \t \t {kind: "enyo.Checkbox", content: "Grouped Checkbox 3"} 
 
    \t \t //]}, 
 
    \t  ]} 
 
    \t \t //{name: "results", classes: "results"} 
 
    \t //], 
 
    \t ], 
 
    \t checkboxChanged: function(inSender, inEvent) { 
 
    \t \t this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."}); 
 
    \t }, 
 
    \t groupActivated: function(inSender, inEvent) { 
 
    \t \t if (inEvent.originator.getActive()) { 
 
    \t \t \t this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."}); 
 
    \t \t } 
 
    \t //}, 
 
    \t } 
 
    \t 
 
    \t 
 
    }); 
 

 
    //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" }, 
 

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

 

 
    </script> 
 
</body> 
 
</html>
的声明

我想上的按钮点击执行动态绑定操作和复选框蜱一起以反映在一流的成果(名结果,箱集装箱)的

在按钮的点击声明1,显示器应该是button1被点击, 点击其他按钮,显示器应该被点击; 对于复选框,我还必须将触发的动作显示组合到该stae-result结果框中。在复选框的点击检查时,点击复选框1,即在删除按钮动作之后应该显示该复选框。

一个动作显示结果在一个时间组合两种按钮和复选框。

+0

编辑您的问题以删除注释掉的代码块是值得的,因为它会让别人更容易帮助您。 –

+0

@Wai我已删除不必要的评论。任何人请建议 –

+0

你犯了几个错误,使用一些解决方法,预期的结果可以实现,但最重要的是你的代码根本不是结构化的,因为你使用'this。$。'调用了兄弟组件的方法在理想情况下,事件可能会更有用的将结果数据传递到兄弟组件..我会很快发布工作代码.. –

回答

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

希望帮助!