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>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet">
  
  <!-- ScarletsFrame framework -->
  <script src='https://cdn.jsdelivr.net/npm/scarletsframe@0.34.0/dist/scarletsframe.min.js'></script>
</head>
<body class="body">
​
<sf-m name="app" class="container">
  <!-- Bind the html content -->
  <div class="today">
    {{ one + ' ' + today.two }}
    <input sf-bind="today.two"/>
    <input sf-bind="one"/>
  </div>
​
  <div class="row">
    <ul class="todo-list">
      <!-- Bind array from the model -->
      <li sf-each="item in list">
        <div class="checkbox">
          <input sf-bind="item.four"/>
          <input sf-bind="item.text.three"/>
          <input sf-bind="today.two"/>
          <input sf-bind="one"/>
          <label>
            {{ item.four + ' ' + item.text.three }}
            <span> - </span>
            {{ today.two + ' ' + one }}
          </label>
        </div>
      </li>
    </ul>
  </div>
</sf-m>
​
<a href="https://www.npmjs.com/package/scarletsframe" target="_blank">ScarletsFrame</a>
</body>
Output

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

Dismiss x
public
Bin info
StefansAryapro
0viewers