Knockout bağlama ile seçili olay değiştir, bunun gerçek bir değişiklik olup olmadığını nasıl bilebilirim?

Bir izin kullanıcı arayüzü oluşturuyorum, her iznin yanında bir seçim listesi olan bir izinler listesi var. İzinler, seçilen bir listeye bağlı gözlemlenebilir nesneler dizisi ile temsil edilir:

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

Şimdi sorun şudur: değişiklik olayı, kullanıcı arayüzü ilk kez doldurulduğunda ortaya çıkar. Ajax işlevimi çağırıyorum, izinler listesini alıyorum ve ardından izin öğelerinin her biri için olay ortaya çıkıyor. Bu gerçekten istediğim davranış değil. Sadece bir kullanıcı seçim listesindeki izin için gerçekten yeni bir değer seçtiğinde yükseltilmesini istiyorum, bunu nasıl yapabilirim?

Aslında olayın kullanıcı veya program tarafından tetiklenip tetiklenmediğini bulmak istiyorsunuz ve bu olayın başlatma sırasında tetikleyeceği açıktır.

Eklemenin nakavt yaklaşımı subscriptionher durumda yardımcı olmayacaktır, çünkü modelin çoğunda böyle uygulanacaktır.

1. modeli tanımlanmamış verilerle başlatın, sadece yapı (actual KO initilization)
2. modeli başlangıç ​​verileriyle güncelleyin (logical init like load JSON , get data etc)
3. Kullanıcı etkileşimi ve güncellemeler

Yakalamak istediğimiz asıl adım 3'teki değişikliklerdir, ancak ikinci adımda subscriptionçağrı alacaktır, Yani daha iyi bir yol, olay değişikliğine aşağıdakiler gibi

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

ve olay permissionChangedişlevinde tespit edildi

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

Bu sadece bir tahmin, ama bunun levelbir sayı olduğu için olduğunu düşünüyorum . Bu durumda, valuebağlama , dize değeriyle changegüncellenmesi için bir olayı tetikleyecektir level. Bu nedenle, levelbaşlamak için bir dize olduğundan emin olarak bunu düzeltebilirsiniz .

Ek olarak, bunu yapmanın daha "Nakavt" yolu olay işleyicileri kullanmak değil, gözlemlenebilirleri ve abonelikleri kullanmaktır. Make levelgözlemlenebilir ve ardından her çalışmasına alacak olan buna bir abonelik eklemek leveldeğişiklikleri.

İşte bu garip davranışa yardımcı olabilecek bir çözüm. Değişim olayını manuel olarak tetiklemek için bir düğme yerleştirmekten daha iyi bir çözüm bulamadım.

DÜZENLEME: Belki bunun gibi özel bir bağlama yardımcı olabilir:

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
            }

        });

    }
  };

Ve seçili veri bağlama özniteliğinizde şunu ekleyin:

changeSelectValue: yourSelectValue

Ben (dayanan bağlayıcı Bu özel kullanmak bu , onun cevabını bkz RP Niemeyer keman bu kesin sayısal değer düzgün (Michael Best çözümü önerdiği gibi) sayıya dize dönüştürülür yapar sorusuna):

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 });
    }
};

Örnek HTML:

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

İlkel bir değer yerine gözlemlenebilir bir değer kullanırsanız, seçme, ilk bağlamada değişiklik olayları oluşturmaz. Doğrudan gözlemlenebilir olana abone olmak yerine değişiklik olayına bağlanmaya devam edebilirsiniz.

Basit bir bayrak kullanarak hızlı ve kirli:

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

Bu işe yaramazsa, setTimeout () içindeki son satırı kaydırmayı deneyin - olaylar eşzamansızdır, bu nedenle, applyBindings () zaten döndürüldüğünde belki de sonuncusu beklemede olabilir.

Benzer bir sorun yaşadım ve değişkenin türünü kontrol etmek için olay işleyicisini değiştirdim. Tür, sayfa ilk yüklendiğinde değil, yalnızca kullanıcı bir değer seçtikten sonra ayarlanır.

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

Bu benim için çalışıyor gibi görünüyor.

bunu kullan:

this.permissionChanged = function (obj, event) {

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

    } 
}

Bunu dene:

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

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

Altını Gizlemeyi kullanarak çalışıyorsanız, gözlenebilir işlevsellik devre dışı bırakmanın temel işlevini kullanın. Yöntemi
kullanın ko.computed()ve bu işlev içinde ajax çağrısını yapın ve tetikleyin.