knockoutでのList（配列）処理

Knockout Advent Calendar 2015

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<h1>Fruit Shop</h1>
<ul data-bind="foreach:items">
    <li>
        <span>{{name}}</span>
        <span>（{{price}}）</span>
    </li>
</ul>

JavaScript

function Item(name,price){
    this.name = name;
    this.price = price;
    ko.track(this);
}
function Shop(){
    this.items = [
        new Item("apple",60),
        new Item("banana",25),
        new Item("cinnamon",80),
        new Item("dragonfruit",120)
    ];
    ko.track(this);
}

var vm = new Shop();

ko.punches.enableAll();
ko.applyBindings(vm);