alterar evento na seleção com ligação knockout, como posso saber se é uma mudança real

Estou construindo uma IU de permissões, tenho uma lista de permissões com uma lista de seleção ao lado de cada permissão. As permissões são representadas por uma matriz observável de objetos que estão vinculados a uma lista de seleção:

<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>

Agora, o problema é o seguinte: o evento de mudança é gerado quando a IU está sendo preenchida pela primeira vez. Eu chamo minha função ajax, obtenho a lista de permissões e, em seguida, o evento é gerado para cada um dos itens de permissão. Este não é realmente o comportamento que desejo. Quero que seja gerado apenas quando um usuário realmente escolher um novo valor para a permissão na lista de seleção , como posso fazer isso?

Na verdade, você deseja descobrir se o evento é disparado pelo usuário ou programa e é óbvio que o evento será disparado durante a inicialização.

A abordagem knockout de adicionar subscriptionnão ajudará em todos os casos, porque na maioria do modelo será implementado assim

1. init o modelo com dados indefinidos, apenas estrutura (actual KO initilization)
2. atualize o modelo com os dados iniciais (logical init like load JSON , get data etc)
3. Interação e atualizações do usuário

A etapa real que queremos capturar são as alterações no 3, mas na segunda etapa subscriptionreceberemos uma chamada. Portanto, a melhor maneira é adicionar alterações ao evento como

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

e detectou o evento em permissionChangedfunção

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

É apenas um palpite, mas acho que está acontecendo porque levelé um número. Nesse caso, a valueligação irá disparar um changeevento para atualizar levelcom o valor da string. Você pode corrigir isso, portanto, certificando- levelse de que é uma string para começar.

Além disso, a maneira mais "Knockout" de fazer isso é não usar manipuladores de eventos, mas usar observáveis ​​e assinaturas. Faça levelum observável e adicione uma assinatura a ele, que será executado sempre levelque houver alterações.

Aqui está uma solução que pode ajudar com esse comportamento estranho. Não consegui encontrar uma solução melhor do que colocar um botão para acionar manualmente o evento de alteração.

EDITAR: Talvez uma ligação personalizada como esta possa ajudar:

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 em seu atributo de vinculação de dados selecionado, adicione:

changeSelectValue: yourSelectValue

Eu uso esta ligação personalizada (com base neste violino de RP Niemeyer, veja sua resposta a esta pergunta), que garante que o valor numérico seja convertido corretamente de string para número (como sugerido pela solução de 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 de exemplo:

<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 você usar um valor observável em vez de um valor primitivo, o select não levantará eventos de mudança na ligação inicial. Você pode continuar a vincular-se ao evento de mudança, em vez de se inscrever diretamente no observável.

Rápido e sujo, utilizando um sinalizador simples:

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 isso não funcionar, tente quebrar a última linha em um setTimeout () - os eventos são assíncronos, então talvez o último ainda esteja pendente quando applyBindings () já retornou.

Tive um problema semelhante e acabei de modificar o manipulador de eventos para verificar o tipo da variável. O tipo só é definido depois que o usuário seleciona um valor, não quando a página é carregada pela primeira vez.

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

Isso parece funcionar para mim.

usa isto:

this.permissionChanged = function (obj, event) {

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

    } 
}

Tente este:

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

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

Se você estiver trabalhando com Knockout, use a funcionalidade principal de knockout de funcionalidade observável.
Use o ko.computed()método e faça e acione a chamada ajax dentro dessa função.