Modifica evento su selezione con associazione ad eliminazione diretta, come posso sapere se si tratta di un vero cambiamento?

Sto creando un'interfaccia utente per le autorizzazioni, ho un elenco di autorizzazioni con un elenco di selezione accanto a ciascuna autorizzazione. I permessi sono rappresentati da una matrice osservabile di oggetti che sono legati a un elenco di selezione:

<div data-bind="foreach: permissions">
     <div class="permission_row">
          <span data-bind="text: name"></span>
          <select data-bind="value: level, event:{ change: $parent.permissionChanged}">
                   <option value="0"></option>
                   <option value="1">R</option>
                   <option value="2">RW</option>
           </select>
      </div>
 </div>

Ora il problema è questo: l'evento di modifica viene generato quando l'interfaccia utente viene popolata per la prima volta. Chiamo la mia funzione ajax, ottengo l'elenco delle autorizzazioni e quindi l'evento viene generato per ciascuno degli elementi di autorizzazione. Questo non è davvero il comportamento che voglio. Voglio che venga generato solo quando un utente seleziona davvero un nuovo valore per l'autorizzazione nell'elenco di selezione , come posso farlo?

In realtà vuoi scoprire se l'evento è attivato dall'utente o dal programma , ed è ovvio che l'evento si attiverà durante l'inizializzazione.

L'approccio knockout dell'aggiunta subscriptionnon aiuta in tutti i casi, perché perché nella maggior parte del modello verrà implementato in questo modo

1. avvia il modello con dati non definiti, solo struttura (actual KO initilization)
2. aggiornare il modello con i dati iniziali (logical init like load JSON , get data etc)
3. Interazione dell'utente e aggiornamenti

Il passaggio effettivo che vogliamo catturare sono le modifiche in 3, ma nel secondo passaggio subscriptionotterremo la chiamata, quindi un modo migliore è aggiungere alla modifica dell'evento come

 <select data-bind="value: level, event:{ change: $parent.permissionChanged}">

e ha rilevato l'evento in permissionChangedfunzione

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

Questa è solo un'ipotesi, ma penso che stia accadendo perché levelè un numero. In tal caso, l' valueassociazione attiverà un changeevento da aggiornare levelcon il valore di stringa. Puoi risolvere questo problema, quindi, assicurandoti che levelsia una stringa con cui iniziare.

Inoltre, il modo più "knockout" per farlo è non utilizzare gestori di eventi, ma utilizzare osservabili e sottoscrizioni. Crea levelun osservabile e quindi aggiungi una sottoscrizione, che verrà eseguita ogni volta che levelcambia.

Ecco una soluzione che può aiutare con questo strano comportamento. Non sono riuscito a trovare una soluzione migliore che posizionare un pulsante per attivare manualmente l'evento di modifica.

EDIT: Forse un'associazione personalizzata come questa potrebbe aiutare:

ko.bindingHandlers.changeSelectValue = {

   init: function(element,valueAccessor){

        $(element).change(function(){

            var value = $(element).val();

            if($(element).is(":focus")){

                  //Do whatever you want with the new value
            }

        });

    }
  };

E nel tuo attributo di associazione dati selezionato aggiungi:

changeSelectValue: yourSelectValue

Uso questa associazione personalizzata (basata su questo violino di RP Niemeyer, vedi la sua risposta a questa domanda), che si assicura che il valore numerico sia correttamente convertito da stringa a numero (come suggerito dalla soluzione di Michael Best):

Javascript:

ko.bindingHandlers.valueAsNumber = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function () {
                    var val = ko.utils.unwrapObservable(observable);
                    return (observable() ? observable().toString() : observable());
                },
                write: function (newValue) {
                    observable(newValue ? parseInt(newValue, 10) : newValue);
                },
                owner: this
            });
        ko.applyBindingsToNode(element, { value: interceptor });
    }
};

HTML di esempio:

<select data-bind="valueAsNumber: level, event:{ change: $parent.permissionChanged }">
    <option value="0"></option>
    <option value="1">R</option>
    <option value="2">RW</option>
</select>

Se si utilizza un valore osservabile invece di un valore primitivo, la selezione non genererà eventi di modifica al collegamento iniziale. Puoi continuare a legarti all'evento di cambiamento, invece di iscriverti direttamente all'osservabile.

Rapido e sporco, utilizzando una semplice bandiera:

var bindingsApplied = false;

var ViewModel = function() {
    // ...

    this.permissionChanged = function() {
        // ignore, if flag not set
        if (!flag) return;

        // ...
    };
};

ko.applyBindings(new ViewModel());
bindingsApplied = true; // done with the initial population, set flag to true

Se questo non funziona, prova a racchiudere l'ultima riga in un setTimeout () - gli eventi sono asincroni, quindi forse l'ultimo è ancora in sospeso quando applyBindings () è già restituito.

Ho avuto un problema simile e ho appena modificato il gestore di eventi per controllare il tipo di variabile. Il tipo viene impostato solo dopo che l'utente seleziona un valore, non quando la pagina viene caricata per la prima volta.

self.permissionChanged = function (l) {
    if (typeof l != 'undefined') {
        ...
    }
}

Questo sembra funzionare per me.

Usa questo:

this.permissionChanged = function (obj, event) {

    if (event.type != "load") {

    } 
}

Prova questo:

self.GetHierarchyNodeList = function (data, index, event)
{
    debugger;
    if (event.type != "change") {
        return;
    }        
} 

event.type == "change"
event.type == "load" 

Se stai lavorando utilizzando Knockout, utilizza la funzionalità chiave di osservabile funzionalità knockout.
Usa il ko.computed()metodo e fai e attiva la chiamata ajax all'interno di quella funzione.