Binding de base

Binding sur lignes de détail, fonctions de calcul

by yinyann

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
        <div data-bind='with: detailValue_1'>
                <p>peinture: <span data-bind="text: totalPeinture"></span></p>
                <p>carrosserie: <span data-bind="text: totalCarrosserie"></span></p>
                <p>total: <span data-bind="text: totalLine"></span></p>
        </div>
        <div data-bind='with: detailValue_1'>
            peinture: <input type="text" data-bind="value: totalPeinture" />
        </div>
_______________________________________________________________________________________
        <div data-bind='with: detailValue_2'>
            <p>peinture: <span data-bind="text: totalPeinture"></span></p>
            <p>carrosserie: <span data-bind="text: totalCarrosserie"></span></p>
            <p>total: <span data-bind="text: totalLine"></span></p>
        </div>
    

        <div data-bind='with: detailValue_2'>
            <input type="text" data-bind="value: totalPeinture" />
        </div>
***************************************************************************************
<p><b>Total peinture: </b><span data-bind="text: totalPeintures"></span></p>
<p><b>Total carrosserie: </b><span data-bind="text: totalCarrosseries"></span></p>
<p><b>Total : </b><span data-bind="text: total"></span></p>

JavaScript

function DetailValorisation(data) {
        this.totalPeinture = ko.observable(data.totalPeinture);
        this.totalCarrosserie = ko.observable(data.totalCarrosserie);

        this.totalLine = ko.computed(function () {
            return (this.totalPeinture() * 1 + this.totalCarrosserie());
        }, this);
    
        return this;
    }

   function EvaluationViewModel() {
       var self = this;
       
       self.detail1 = new DetailValorisation({totalPeinture: 40.00,totalCarrosserie: 60.00});
       self.detail2 = new DetailValorisation({totalPeinture: 40.15,totalCarrosserie: 120.00});
       
       self.detailValue_1 = ko.observable(self.detail1);
       self.detailValue_2 = ko.observable(self.detail2); 
       
       self.totalPeintures = ko.computed(function () {
            return (self.detail1.totalPeinture() * 1 + self.detail2.totalPeinture() * 1);
        }, this);
       
       self.totalCarrosseries = ko.computed(function () {
            return (self.detail1.totalCarrosserie() * 1 + self.detail2.totalCarrosserie() * 1);
        }, this);
       
       self.total = ko.computed(function () {
            return (self.totalPeintures() * 1 + self.totalCarrosseries() * 1);
        }, this);
    }

 ko.applyBindings(new EvaluationViewModel());