JSFiddle - React, Tailwind, and code Playground

by taberhuang

HTML

<script src="http://bishengjs.com/bower_components/jquery/jquery.js"></script>
<script src="http://bishengjs.com/bower_components/handlebars/handlebars.js"></script>
<script src="http://bishengjs.com/dist/bisheng.js"></script>

<div id="demo"></div>
<div id="output"></div>

<button id="addItemButton">addItem</button>
<button id="printDataButton">printData</button>

JavaScript

$(function() {
    var data = {
        list: {
            fields: []
        }
    }
    var tpl = (function(){/*
    {{#each list}}
        {{#each fields}}
        <input type="text" value="{{.}}" /><br />
        {{/each}}
    {{/each}}
    */}).toString().split('\n').slice(1,-1).join('\n') + '\n'
    
    BiSheng.bind(data, tpl, function(content) {
        $('#demo').html(content)
    })
    
    $('#addItemButton').on('click', function() {
        data.list.fields.push('')
        BiSheng.apply()
    })
    
    $('#printDataButton').on('click', function() {
        $('#output').html(JSON.stringify(data))
    })
})