JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/kmalakoff/knockback/master/knockback.min.js"></script>
<h2>Your seat reservations</h2>

<table>
    <thead><tr>
       <th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <button id="btnAdd">add new</button>
   <tbody data-bind="foreach: availableMeals">
    <tr>
        <td data-bind="text: mealName"></td>
        <td data-bind="text: price"></td>
        <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
    </tr>    
</tbody>
</table>
<p>    
    <p>Your Meals:</p>
    <select multiple="true" width="100" data-bind="options:availableMeals,value:'mealName',optionsText:'mealName'"> </select>

JavaScript

// create a plain old backbone model
var backboneModel = new Backbone.Model({
    availableMeals: ko.observableArray([{
        mealName:'taco',price:'20'
    }])
});


var viewModel = kb.viewModel(backboneModel, {
    read_only: false
});

ko.applyBindings(viewModel);

$("#btnAdd").click(function(){
    var meals = backboneModel.get('availableMeals');
    meals.push({mealName: "Burger", price: 100});
});