Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .fade-in {
      opacity: 0;
    }
  </style>
</head>
<body>
  <questions-app></questions-app>
  
  <!--script src="https://rawgit.com/canjs/canjs/v3.13.1/dist/global/can.all.js"></script-->
  <script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://rawgit.com/canjs/canjs/v4.2.0/dist/global/can.all.js"></script>
​
​
  
  </body>
</html>
 
​
 
can.Component.extend({
  tag: "questions-app",
  view: `
    <ul>
      {{#each(questions, question=value)}}
        <li on:click="../removeQuestion(question)"
            on:removing:by:question="fadeOut()"
            on:inserting:by:question="fadeIn()">{{question.name}}</li>
        
      {{/each}}
    </ul>
​
​
    <form on:submit="addQuestion(scope.element.name.value)">
      <input name='name'/>
    </form>
  `,
  ViewModel: {
    questions: {
      default() {
        return [
          { name: "Who are you?" },
          { name: "What do you want to know"}
        ];
      }
    },
    removeQuestion(question){
      question.dispatch("removing");
      setTimeout(() => {
        var index = this.questions.indexOf(question);
        this.questions.splice(index, 1);
      },1000)
    },
    addQuestion(questionName) {
      var question = new can.DefineMap({name: questionName});
      // add question to the DOM immediately
      this.questions.push(question);
      question.dispatch("inserting")
    }
  },
  events: {
    "form submit": function(form, ev){
      ev.preventDefault()
    }
  }
})
​
can.stache.addHelper("fadeOut", function(){
  return function(el) {
    return Velocity(el, { opacity: 0 }, { duration: 1000 });
  }
})
can.stache.addHelper("fadeIn", function(){
  return function(el) {
    el.style.opacity = 0
    return Velocity(el, { opacity: 1 }, { duration: 1000 });
  }
})
​
​
Output

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

Dismiss x
public
Bin info
justinbmeyerpro
0viewers