Sự kiện thay đổi thuộc tính javascript

Question

Tôi cần kích hoạt sự kiện mỗi khi một thuộc tính được cập nhật/thay đổi để giữ các phần tử dom đồng bộ với các giá trị thuộc tính trên mô hình (Im sử dụng thừa kế đơn giản của john resig http://ejohn.org/blog/simple-javascript-inheritance/). Điều này có thể thực hiện theo cách trình duyệt chéo không? Dường như với tôi rằng nếu tôi có thể bọc bất kỳ js chức năng sử dụng để thiết lập tài sản và làm cho nó cháy một sự kiện, rằng nó có thể làm việc, Im chỉ không chắc chắn làm thế nào để làm điều đó.

Answer 1

JavaScript không sử dụng chức năng để đặt thuộc tính. Chúng chỉ là các biến, và thiết lập chúng không yêu cầu bất kỳ trình bao bọc phức tạp nào.

Bạn có thể sử dụng một chức năng để thiết lập thuộc tính, mặc dù - cùng một loại một thỏa thuận getter/setter bạn có thể sử dụng trong một ngôn ngữ mà được hỗ trợ dữ liệu cá nhân trong lớp học. Bằng cách đó, chức năng của bạn có thể dễ dàng chạy các chức năng khác đã được đăng ký dưới dạng gọi lại. Sử dụng jQuery bạn thậm chí có thể xử lý chúng như các sự kiện.

$(yourObject).bind('some-event-you-made-up', function() { 
    // This code will run whenever some-event-you-made-up is triggered on yourObject 
}); 

// ... 

$(yourObject).trigger('some-event-you-made-up'); 

Answer 2

Có thể bạn đã giải quyết được vấn đề với trình kích hoạt/kích hoạt jQuery, nhưng tôi muốn nói rằng tôi đang tạo một Thay đổi theo dõi và (trên hết) Khuôn khổ Javascript mô hình thực thể, có tên là "lều" vấn đề bạn tiếp xúc, mà không đòi hỏi bất kỳ cú pháp đặc biệt về thao tác đối tượng, mã nguồn mở và lưu trữ tại:

https://github.com/benjamine/tent

Nó ghi nhận với JSDoc và đơn vị thử nghiệm với js-test-driver.

bạn có thể sử dụng các mô-đun thay đổi theo dõi theo cách này:

var myobject = { name: 'john', age: 34 }; 

    // add a change handler that shows changes on alert dialogs 
    tent.changes.bind(myobject, function(change) { 
     alert('myobject property '+change.data.propertyName+' changed!'); 
    }); 

    myobject.name = 'charly'; // gets notified on an alert dialog 

nó làm việc với mảng thay đổi quá (thêm, xóa). Hơn nữa, bạn có thể sử dụng ngữ cảnh "Thực thể" để giữ một thay đổi của tất cả các thay đổi được phát hiện (ADDED, DELETED, MODIFIED items) được nhóm lại trên các bộ sưu tập, bổ sung và xóa, giữ thuộc tính đảo ngược được đồng bộ hóa, theo dõi 1-to-1, 1-to- N và các mối quan hệ N-to-M vv

Answer 3

Bạn có thể thử Javascript Property Events (jpe.js)

tôi gặp phải một vấn đề tương tự, và kết thúc viết một chức năng quá tải cho Object.defineProperty có thêm xử lý sự kiện cho các thuộc tính. Nó cũng cung cấp kiểm tra kiểu (js-base-types) và lưu trữ giá trị của nó trong nội bộ, ngăn ngừa những thay đổi không mong muốn.

Mẫu defineProperty bình thường:

Object.defineProperty(document, "property", { 
    get:function(){return myProperty}, 
    set:function(value){myProperty = value}, 
}) 
var myProperty = false; 

Mẫu tài sản với onchange sự kiện:

Object.defineProperty(document, "property", { 
    default:false, 
    get:function(){}, 
    set:function(value){}, 
    onchange:function(event){console.info(event)} 
}) 

Answer 4

Object defineProperty/defineProperties hiện các trick. Ở đây có một mã đơn giản. Tôi đã xây dựng một số khuôn khổ ràng buộc dữ liệu dựa trên đó, và nó có thể trở nên thực sự phức tạp, nhưng để thực hiện nó như thế này:

var oScope = { 
    $privateScope:{}, 
    notify:function(sPropertyPath){ 
     console.log(sPropertyPath,"changed"); 
    } 
}; 
Object.defineProperties(oScope,{ 
    myPropertyA:{ 
     get:function(){ 
      return oScope.$privateScope.myPropertyA 
     }, 
     set:function(oValue){ 
      oScope.$privateScope.myPropertyA = oValue; 
      oScope.notify("myPropertyA"); 
     } 
    } 
}); 

oScope.myPropertyA = "Some Value"; 
//console will log: myPropertyA changed