javascript 如何检查数据属性是否更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20761612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I check if a data-attribute changes?
提问by Michael Joseph Aubry
var max = this.collection.max(function(player) {
return player.get('points');
});
I spent a few hours playing with backbone.js trying to figure out how to check if my max model changes, it was nearly impossible, so I decided to set the models cid as a data-attribute now it seems impossible to check if the data-attribute changes?
我花了几个小时玩backbone.js试图弄清楚如何检查我的最大模型是否发生变化，这几乎是不可能的，所以我决定将模型cid设置为数据属性现在似乎不可能检查数据- 属性变化？
I set the attribute like so,
我像这样设置属性，
$(this.$el).attr('data-id', max.cid)
When my app re-renders the data-attribute may or may not get a new value. I am really not sure how to check if it changes, I have seen a lot of various dirty hacks and setIntervalfunctionality but nothing that seemed very clean, so I am hoping someone knows a nice clean way to do this?
当我的应用程序重新呈现时，数据属性可能会也可能不会获得新值。我真的不知道如何检查它是否发生变化，我已经看到了很多各种肮脏的黑客和setInterval功能，但没有什么看起来很干净，所以我希望有人知道一个很好的干净的方法来做到这一点？
Basically I just want control over the element if it renders new data from another model (meaning if another model takes the max value), I need to check the id to confirm that the model is a new version, and run an animation or render it showing that it is a new model.
基本上我只想控制元素，如果它从另一个模型渲染新数据（意味着如果另一个模型采用最大值），我需要检查 id 以确认模型是新版本，然后运行动画或渲染它表明它是一个新模型。
回答by Popnoodles
First of all the data- attribute - while you can access the data attribute using .attr or .prop, data is stored in an object $.cacheon page load and manipulated thereafter. The attributes data-* are NEVER updated.
首先是数据属性 - 虽然您可以使用 .attr 或 .prop 访问数据属性，但数据$.cache在页面加载时存储在一个对象中，然后进行操作。属性 data-* 永远不会更新。
To set data
设置数据
$el.data('id', max.cid);
To get data
获取数据
var something = $el.data('id');
Unfortunately there is no way to listen for a change in data without using setInterval as previously explored in this similar question.
不幸的是，如果不使用之前在这个类似问题中探讨过的 setInterval，就无法监听数据的变化。
That said, if it's only YOUR code that's updating the data, a logical solution is this:
也就是说，如果只有您的代码在更新数据，那么合乎逻辑的解决方案是：
Set up an event
设置一个事件
$el.on('datachange', function(){
// procedure here
});
Then either trigger it when you update the data
然后在更新数据时触发它
$el.data('id', max.cid).trigger('datachange');
or write your own data function that uses .data() and triggers the event
或编写您自己的使用 .data() 并触发事件的数据函数
$.fn.mydata=function(key, variable){
$(this).data(key, variable).trigger('datachange');
}
$el.mydata('id', max.cid);
Example: http://jsfiddle.net/Qn9H6/
示例：http: //jsfiddle.net/Qn9H6/
$("#test").on('datachange', function(e, key){
$('#feedback').hide().text('data "' + key + '" was changed to ' + $(this).data(key)).fadeIn(1000);
});
$.fn.mydata=function(key, variable){
if ($(this).data(key)!=variable){ // check if it's changed
$(this).data(key, variable).trigger('datachange', key);
}else{
console.log('data wasn\'t changed');
}
}
$('button').click(function() {
$("#test").mydata('id', $(this).text());
})
$("#test").mydata('id', 456);
