thay đổi sự kiện khi lựa chọn với ràng buộc loại trực tiếp, làm thế nào tôi có thể biết liệu đó có phải là sự thay đổi thực sự hay không

Tôi đang xây dựng giao diện người dùng quyền, tôi có một danh sách các quyền với một danh sách chọn bên cạnh mỗi quyền. Các quyền được đại diện bởi một mảng đối tượng có thể quan sát được liên kết với một danh sách chọn:

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

Bây giờ vấn đề là thế này: sự kiện thay đổi được đưa ra khi giao diện người dùng mới xuất hiện lần đầu tiên. Tôi gọi hàm ajax của mình, lấy danh sách quyền và sau đó sự kiện được nêu ra cho từng mục quyền. Đây thực sự không phải là hành vi mà tôi muốn. Tôi muốn nó chỉ được nâng lên khi người dùng thực sự chọn ra một giá trị mới cho quyền trong danh sách lựa chọn , làm cách nào tôi có thể làm điều đó?

Trên thực tế, bạn muốn tìm xem liệu sự kiện có được kích hoạt bởi người dùng hoặc chương trình hay không và sự kiện đó sẽ kích hoạt trong khi khởi chạy.

Cách tiếp cận loại trực tiếp của việc thêm subscriptionsẽ không giúp ích trong mọi trường hợp, tại sao vì trong hầu hết các mô hình sẽ được triển khai như thế này

1. kết hợp mô hình với dữ liệu không xác định, chỉ cấu trúc (actual KO initilization)
2. cập nhật mô hình với dữ liệu ban đầu (logical init like load JSON , get data etc)
3. Tương tác người dùng và cập nhật

Bước thực tế mà chúng tôi muốn nắm bắt là các thay đổi trong 3, nhưng trong bước thứ hai subscriptionsẽ nhận được lệnh gọi, Vì vậy, cách tốt hơn là thêm vào thay đổi sự kiện như

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

và phát hiện sự kiện trong permissionChangedchức năng

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

Đây chỉ là một phỏng đoán, nhưng tôi nghĩ nó xảy ra bởi vì levelnó là một con số. Trong trường hợp đó, valueràng buộc sẽ kích hoạt một changesự kiện để cập nhật levelvới giá trị chuỗi. Do đó, bạn có thể sửa lỗi này bằng cách đảm bảo levellà một chuỗi để bắt đầu.

Ngoài ra, cách thực hiện "Knockout" hơn là không sử dụng các trình xử lý sự kiện mà sử dụng các đối tượng có thể quan sát và đăng ký. Tạo levelmột mục có thể quan sát và sau đó thêm đăng ký vào đó, đăng ký này sẽ được chạy bất cứ khi nào levelthay đổi.

Đây là một giải pháp có thể giúp giải quyết hành vi kỳ lạ này. Tôi không thể tìm thấy giải pháp tốt hơn là đặt một nút để kích hoạt sự kiện thay đổi theo cách thủ công.

CHỈNH SỬA: Có thể một ràng buộc tùy chỉnh như thế này có thể giúp:

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
            }

        });

    }
  };

Và trong thuộc tính data-bind đã chọn của bạn, hãy thêm:

changeSelectValue: yourSelectValue

Tôi sử dụng tùy chỉnh này ràng buộc (dựa trên này fiddle bởi RP Niemeyer, xem câu trả lời của mình để này câu hỏi), mà làm cho chắc chắn rằng các giá trị số được chuyển đổi hoàn toàn khỏi chuỗi số (theo đề nghị của các giải pháp của Michael xuất sắc nhất):

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 mẫu:

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

Nếu bạn sử dụng một giá trị có thể quan sát được thay vì một giá trị nguyên thủy, thì vùng chọn sẽ không tăng các sự kiện thay đổi trên ràng buộc ban đầu. Bạn có thể tiếp tục liên kết với sự kiện thay đổi, thay vì đăng ký trực tiếp vào sự kiện có thể quan sát được.

Nhanh chóng và bẩn thỉu, sử dụng một lá cờ đơn giản:

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

Nếu cách này không hiệu quả, hãy thử gói dòng cuối cùng trong setTimeout () - các sự kiện không đồng bộ, vì vậy có thể sự kiện cuối cùng vẫn đang chờ xử lý khi applyBindings () đã được trả về.

Tôi đã gặp sự cố tương tự và tôi vừa sửa đổi trình xử lý sự kiện để kiểm tra loại biến. Loại chỉ được đặt sau khi người dùng chọn một giá trị, không phải khi trang được tải lần đầu tiên.

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

Điều này dường như làm việc cho tôi.

dùng cái này:

this.permissionChanged = function (obj, event) {

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

    } 
}

Hãy thử cái này:

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

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

Nếu bạn đang làm việc bằng Knockout, hãy sử dụng chức năng chính của loại bỏ chức năng quan sát được.
Sử dụng ko.computed()phương thức và thực hiện và kích hoạt lệnh gọi ajax trong hàm đó.