Highlight Changes

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

function observableWithDirtyFlag(data){
    this.dirtyFlag = false
}

var utilities = {
    DisplayAmount: function(value) {
        return (value * 1).toFixed(2);
    }
};

function DetailValorisation(data) {
        this.peinture = ko.observable(data.totalPeinture);
        this.peintureIsDirty = ko.observable(false);
        this.totalPeinture =  ko.dependentObservable({
            read: function () {
                return utilities.DisplayAmount(this.peinture());
            },
            write: function (newValue) {
                this.peinture(newValue);
                this.peintureIsDirty(true);
            },
            owner: this
        });

        this.carrosserie = ko.observable(data.totalCarrosserie);
        this.carrosserieIsDirty = ko.observable(false);
        this.totalCarrosserie =  ko.dependentObservable({
            read: function () {
                return utilities.DisplayAmount(this.carrosserie());
            },
            write: function (newValue) {
                this.carrosserie(newValue);
                this.carrosserieIsDirty(true);
            },
            owner: this
        });    
    
        this.etm = ko.observable(data.totalEtm);
        this.etmIsDirty = ko.observable(false);
        this.totalEtm =  ko.dependentObservable({
            read: function () {
                return utilities.DisplayAmount(this.etm());
            },
            write: function (newValue) {
                this.etm(newValue);
                this.etmIsDirty(true);
            },
            owner: this
        });

        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() {
    ...