using KO_Sortable after move event

Question

I am trying to convert my project over to use Ryan Niemeyer's drag and drop plugin (http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html).

I'm trying to implement an is dirty flag to indicate if a item has been dragged to a new location on the screen and I have implemented this using the IsDirty property

var AccountViewModel = function(data) {
        this.$type = 'AccountViewModel';
        this.IsDirty = new ko.observable(false);
        ko.mapping.fromJS(data, mapping, this);

        this.add = function(item) {
            this.Accounts.push(item);
        };
    };

I have an aftermove event that should set the IsDirty property to true but for some reason I have to move the object twice before my data-binding will pick it up.

    ko.bindingHandlers.sortable.afterMove = function(args) {
        args.item.IsDirty = true;
    };

<div class="accounts" data-bind="sortable: { data: Accounts }">
            <div class="row" data-bind="css: { dirty: IsDirty, newItem: IsNewAccount }">
                <div class="actions item"></div>
                <div class="accountItem item" data-bind="text: IsDirty"></div>
                <div class="accountItem item" data-bind="text: AccountName"></div>
                <div class="accountItem item" data-bind="text: IACode"></div>
                <div class="accountItem item" data-bind="dateFormat: OpenDate"></div>
                <div class="accountItem numberItem item" data-bind="text: T12Revenue"></div>
                <div class="accountItem numberItem item" data-bind="text: AUA"></div>
                <div class="accountItem item"></div>
                <div class="actions item"><img id="delete" src="~/Images/delete.png"/></div>
            </div>
        </div>

Do I have to force a refresh on KO or something ? any help would be greatly appreciated!!

Answer 1

Your IsDirty property defined with this.IsDirty = new ko.observable(false); so it is knockout observable.

Observables are functions and you need set their values with calling them with the value as the argument what you want to set:

ko.bindingHandlers.sortable.afterMove = function(args) {
    args.item.IsDirty(true);
};

Demo JSFiddle