Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://npmcdn.com/ractive@0.7.3"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>
 
.pretty-button
  padding 8px 6px
  border 1px solid #eee
  background-color #ddeee
  color #333
  font-size 18px
  &:hover
    background-color #eee
    border 1px solid #333
    cursor pointer
 
let attrSafeList = {
  className: 'class',
  title: 'title'
};
let PrettyButton = Ractive.extend({
  template: `<button>{{ yield }}</button>`,
  
  onrender() {
    let element = this.find('button');
    
    Object.keys( attrSafeList ).forEach(key => {
      let value = attrSafeList[key]
      let attrValue = this.get(value)
      if (attrValue !== undefined) {
        if (key === 'className') {
          attrValue = `${element[key]} ${attrValue}`
        }
        element[key] = attrValue
      }
    })
  }
});
new Ractive({
  el: 'root',
  components: {
    PrettyButton: PrettyButton
  },
  template: `Hello <PrettyButton class="pretty-button" title="Hello Pretty Button">Pretty Button</PrettyButton>`
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
silentworkspro
0viewers