Knockout/Basic1

by MKGaru

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>[{{$index()+1}}]</span>
        <span>{{name}}</span>
        <span>（{{price}}）</span>
    </li>
</ul>
<form data-bind="submit: register"> 
    <fieldset>
        <legend>商品登録：</legend>
        <label>商品名:<input type="text" id="item-name-input"></label>
        <label>価格:<input type="text" id="item-price-input"></label>
        <button>登録</button>
    </fieldset>
</form>

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);
}
Shop.prototype.register = function(){
    this.items.push(
        new Item(
            document.querySelector("#item-name-input").value,
            +document.querySelector("#item-price-input").value
        )
    );
};

var vm = new Shop();

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