เปลี่ยนเหตุการณ์เมื่อเลือกด้วยการผูกสิ่งที่น่าพิศวงฉันจะรู้ได้อย่างไรว่าเป็นการเปลี่ยนแปลงจริง?

ฉันกำลังสร้าง UI การอนุญาตฉันมีรายการสิทธิ์พร้อมรายการเลือกถัดจากสิทธิ์แต่ละรายการ สิทธิ์จะแสดงโดยอาร์เรย์ของวัตถุที่สังเกตได้ซึ่งเชื่อมโยงกับรายการที่เลือก:

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

ตอนนี้ปัญหาคือ: เหตุการณ์การเปลี่ยนแปลงจะเพิ่มขึ้นเมื่อ UI เพิ่งเติมข้อมูลเป็นครั้งแรก ฉันเรียกใช้ฟังก์ชัน ajax ของฉันรับรายการสิทธิ์จากนั้นเหตุการณ์จะถูกยกขึ้นสำหรับแต่ละรายการสิทธิ์ นี่ไม่ใช่พฤติกรรมที่ฉันต้องการจริงๆ ฉันต้องการให้เพิ่มขึ้นก็ต่อเมื่อผู้ใช้เลือกค่าใหม่สำหรับสิทธิ์ในรายการเลือกเท่านั้นฉันจะทำอย่างไร

จริงๆแล้วคุณต้องการค้นหาว่าเหตุการณ์นั้นถูกกระตุ้นโดยผู้ใช้หรือโปรแกรมหรือไม่และเห็นได้ชัดว่าเหตุการณ์นั้นจะทริกเกอร์ขณะเริ่มต้น

วิธีที่น่าพิศวงของการเพิ่มsubscriptionจะไม่ช่วยในทุกกรณีเพราะเหตุใดในรูปแบบส่วนใหญ่จะดำเนินการเช่นนี้

1. เริ่มต้นโมเดลด้วยข้อมูลที่ไม่ได้กำหนดเพียงโครงสร้าง (actual KO initilization)
2. อัปเดตโมเดลด้วยข้อมูลเบื้องต้น (logical init like load JSON , get data etc)
3. การโต้ตอบและการอัปเดตของผู้ใช้

ขั้นตอนจริงที่เราต้องการจับภาพคือการเปลี่ยนแปลงใน 3 แต่ในขั้นตอนที่สองsubscriptionจะได้รับการโทรดังนั้นวิธีที่ดีกว่าคือเพิ่มการเปลี่ยนแปลงเหตุการณ์เช่น

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

และตรวจพบเหตุการณ์ในpermissionChangedฟังก์ชัน

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

นี่เป็นเพียงการคาดเดา แต่ฉันคิดว่ามันเกิดขึ้นเพราะlevelเป็นตัวเลข ในกรณีนั้นการvalueผูกจะทริกเกอร์changeเหตุการณ์เพื่ออัปเดตlevelด้วยค่าสตริง คุณสามารถแก้ไขปัญหานี้ได้โดยตรวจสอบให้แน่ใจว่าlevelเป็นสตริงที่จะเริ่มต้นด้วย

นอกจากนี้วิธีที่ "น่าพิศวง" มากขึ้นในการดำเนินการนี้คือการไม่ใช้ตัวจัดการเหตุการณ์ แต่ใช้การสังเกตและการสมัครสมาชิก ทำให้levelสังเกตแล้วเพิ่มการสมัครสมาชิกไปซึ่งจะได้รับการเรียกใช้เมื่อใดก็ตามที่levelมีการเปลี่ยนแปลง

นี่คือวิธีแก้ปัญหาที่อาจช่วยให้มีพฤติกรรมแปลก ๆ นี้ได้ ฉันไม่พบวิธีแก้ปัญหาที่ดีไปกว่าการวางปุ่มเพื่อเรียกเหตุการณ์การเปลี่ยนแปลงด้วยตนเอง

แก้ไข: บางทีการผูกแบบกำหนดเองเช่นนี้อาจช่วยได้:

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
            }

        });

    }
  };

และในแอตทริบิวต์การผูกข้อมูลที่คุณเลือกเพิ่ม:

changeSelectValue: yourSelectValue

ฉันใช้การผูกแบบกำหนดเองนี้ (อ้างอิงจากซอนี้โดย RP Niemeyer ดูคำตอบของเขาสำหรับคำถามนี้ ) ซึ่งทำให้แน่ใจว่าค่าตัวเลขถูกแปลงจากสตริงเป็นตัวเลขอย่างถูกต้อง (ตามคำแนะนำของ 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:

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

หากคุณใช้ค่าที่สังเกตได้แทนค่าดั้งเดิมการเลือกจะไม่เพิ่มเหตุการณ์การเปลี่ยนแปลงในการเชื่อมโยงครั้งแรก คุณสามารถเชื่อมโยงกับเหตุการณ์การเปลี่ยนแปลงต่อไปได้แทนที่จะสมัครรับข้อมูลที่สังเกตได้โดยตรง

รวดเร็วและสกปรกโดยใช้แฟล็กง่ายๆ:

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

หากวิธีนี้ไม่ได้ผลให้ลองตัดบรรทัดสุดท้ายใน setTimeout () - เหตุการณ์เป็นแบบ async ดังนั้นรายการสุดท้ายอาจยังคงค้างอยู่เมื่อส่งคืน applyBindings () แล้ว

ฉันมีปัญหาที่คล้ายกันและฉันเพิ่งแก้ไขตัวจัดการเหตุการณ์เพื่อตรวจสอบประเภทของตัวแปร ประเภทจะถูกตั้งค่าหลังจากผู้ใช้เลือกค่าเท่านั้นไม่ใช่เมื่อโหลดเพจครั้งแรก

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

ดูเหมือนว่าจะได้ผลสำหรับฉัน

ใช้สิ่งนี้:

this.permissionChanged = function (obj, event) {

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

    } 
}

ลองอันนี้:

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

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

หากคุณกำลังทำงานโดยใช้ Knockout ให้ใช้ฟังก์ชันหลักของฟังก์ชันการทำงานที่สังเกตได้ที่น่าพิศวง
ใช้ko.computed()วิธีการและทำและทริกเกอร์การโทร ajax ภายในฟังก์ชันนั้น