событие изменения свойства javascript

Question

Мне нужно запускать событие каждый раз, когда свойство обновляется/изменяться, чтобы сохранить элементы dom в синхронизации со значениями свойств модели (Im с использованием простого наследования john resig http://ejohn.org/blog/simple-javascript-inheritance/). Можно ли это сделать в кросс-браузере? Мне кажется, что если бы я мог обернуть любую функцию js, используемую для установки свойств и заставить ее сгенерировать событие, чтобы он мог работать, я просто не знаю, как это сделать.

Answer 1

JavaScript не использует функцию для установки свойств. Они просто переменные, и их установка не требует разработки сложных оберток.

Вы можете использовать функцию для установки свойства, хотя - такие же расположение геттера/сеттера вы могли бы использовать на языке, поддерживаемых личные данные в классах. Таким образом, ваша функция может легко запускать другие функции, которые были зарегистрированы как обратные вызовы. Используя jQuery, вы можете обрабатывать их как события.

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

Может быть, вы уже решили проблему с JQuery привязки/запуска, но я хотел бы сказать, что я строю отслеживания изменений и (в верхней части этого) Entity Framework моделирования Javascript, под названием «шатра», который решает проблема вы разоблачены, не требуя какого-либо специального синтаксиса на манипуляции объекта, его с открытым исходным кодом и размещение на:

https://github.com/benjamine/tent

Это документировано JSDoc и подвергнутое испытанию с JS-тест-драйвера.

вы можете использовать модуль отслеживания изменений так:

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 

он работает с массивом тоже меняется (добавляет, удаляет). Далее вы можете использовать контексты «Entity», чтобы сохранить изменения всех обнаруженных изменений (добавленные, удаленные, измененные элементы), сгруппированные по коллекциям, добавление и удаление каскадов, синхронизация обратных свойств, отслеживание 1-к-1, 1-к- N и N-к-M отношение и т.д.

Answer 3

Вы можете попробовать Javascript Property Events (jpe.js)

я столкнулся с аналогичной проблемой, и в конечном итоге писать функцию перегрузки для Object.defineProperty, которая добавляет обработчик событий к свойствам. Он также обеспечивает проверку типов (js-base-types) и сохраняет свое значение внутри, предотвращая нежелательные изменения.

Образец нормального defineProperty:

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

Образец имущества с OnChange событие:

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

Answer 4

Объект defineProperty/defineProperties делает трюк. Здесь идет простой код. Я построил некоторые привязки данных рамок на его основе, и он может получить очень сложно, но для осуществления его, как это:

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