自動計算と手動計算の混ぜ方

"価格"は"単価"と"数量"から求めてね！ でも、 "価格”は直接入力することもあるからね！ なケースの対処方法

by MKGaru

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://mbest.github.io/knockout.punches/knockout.punches.min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.min.js"></script>
<table>
    <thead>
        <tr><th>単価</th><th>数量</th><th>価格</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="number" data-bind="value:unitPrice"/></td>
            <td><input type="number" data-bind="value:quantity"/></td>
            <td><input type="number" data-bind="value:price" readonly/></td>
        </tr>
        <tr>
            <td>{{unitPrice}}</td>
            <td>{{quantity}}</td>
            <td>{{price}}</td>
        </tr>
    </tbody>
</table>

CSS

tbody>tr *{
    text-align:right;
}

JavaScript

function App(){
    var app = this;
    
    app.unitPrice = null;
    app.quantity = null;
    ko.track(app);
    ko.defineProperty(app,'price',function(){
        return app.unitPrice * app.quantity;
    });
}

ko.punches.enableAll();
ko.applyBindings(new App());