Highlight Changes - refacto Pascal

Gestion du dirty flag pour suivre les changements

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, css: { changed: peintureIsDirty() }"></span>
                <span class="giveMeSomeSpace"></span>
                <input type="text" data-bind="value: totalPeinture" /></p>
            <p>carrosserie: <span data-bind="text: totalCarrosserie, css: { changed: carrosserieIsDirty() }"></span>
                <span class="giveMeSomeSpace"></span>
                <input type="text" data-bind="value: totalCarrosserie" /></p>
            <p>etm: <span data-bind="text: totalEtm, css: { changed: etmIsDirty() }"></span>
                <span class="giveMeSomeSpace"></span>
                <input type="text" data-bind="value: totalEtm" /></p>
            <p>total: <span data-bind="text: totalLine, css: { changed: totalLineIsDirty() }"></span></p>
        </div>
_______________________________________________________________________________________
        <div data-bind='with: detailValue_2'>
            <p>peinture: <span data-bind="text: totalPeinture, css: { changed: peintureIsDirty() }"></span>
                <span class="giveMeSomeSpace"></span>
                <input type="text" data-bind="value: totalPeinture" /></p>
            <p>carrosserie: <span data-bind="text: totalCarrosserie, css: { changed: carrosserieIsDirty() }"></span>
                <span class="giveMeSomeSpace"></span>
                <input type="text" data-bind="value: totalCarrosserie" /></p>
            <p>etm: <span data-bind="text: totalEtm, css: { changed: etmIsDirty() }"></span>
                <span class="giveMeSomeSpace"></span>
                <input type="text" data-bind="value: totalEtm" /></p>
            <p>total: <span data-bind="text: totalLine, css: { changed: totalLineIsDirty() }"></span></p>
       ...

CSS

.changed { border: solid 1px blue; background-color: yellowgreen; }
.giveMeSomeSpace { width:100px;display: inline-block; border: solid 1px green; }

JavaScript

var utilities = {
    DisplayAmount: function(value) {
        return (value * 1).toFixed(2);
    }
};
function totalObservable(elm, property)
{
    return ko.dependentObservable({
            read: function () {
                return utilities.DisplayAmount(elm[property]());
            },
            write: function (newValue) {
                elm[property](newValue);
                elm[property+"IsDirty"](true);
            },
            owner: elm
});}
function observableWithDirtyFlag(elt, valueProperty, observableProperty, data){
        elt[valueProperty] = ko.observable(data[observableProperty]);
        elt[valueProperty+"IsDirty"] = ko.observable(false);
        elt[observableProperty] =  totalObservable(elt, valueProperty);
}
function DetailValorisation(data) {
        this.detailElements={
            "peinture":"totalPeinture",
            "etm":"totalEtm",
            "carrosserie":"totalCarrosserie"       
        };
        
        for (elt in this.detailElements)
        {
            observableWithDirtyFlag(this,elt,this.detailElements[elt], data);
        }

        this.totalLine = ko.computed(function () {
            return utilities.DisplayAmount(this.peinture() * 1 + this.carrosserie() * 1 + this.etm() * 1);
        }, this);
    
        this.totalLineIsDirty = ko.computed(function () {
            return  this.peintureIsDirty() | this.carrosserieIsDirty() | this.etmIsDirty();
        }, this);
    
        return this;
    }

   function EvaluationViewModel() {
       var self = this;
       
       self.detail1 = new DetailValorisation({totalPeinture: 40.00,totalCarrosserie: 60.00, totalEtm: 21.00});
       self.detail2 = new DetailValorisation({totalPeinture: 40.15,totalCarrosserie: 120.00, totalEtm: 5.00});
       
       self.detailValue_1 = ko.observable(self.detail1);
       self.detailValue_2 = ko.observable(self.detail2); 
       
       self.totalPeintures = ko.computed(function () {
            return...