如何检查数据属性是否更改？

Question

var max = this.collection.max(function(player) {
    return player.get('points');
});

我花了几个小时玩backbone.js，试图找出如何检查我的最大模型是否改变，但几乎是不可能的，所以我决定将模型的cid设置为数据属性，现在似乎无法检查数据属性是否更改？

我是这样设置属性的,

$(this.$el).attr('data-id', max.cid)

当我的应用重新渲染时，数据属性可能会得到一个新值。我不确定如何检查它是否发生了变化，我见过很多各种各样的骚操作和setInterval功能，但似乎没有什么很干净的方法，所以我希望有人知道一个漂亮干净的方法来做这个?

基本上，如果渲染新数据来自另一个模型（意味着如果另一个模型采用了最大值），我需要检查ID以确认该模型是一个新版本，并运行动画或呈现它，显示它是一个新模型。

- Michael Joseph Aubry

---

你试过使用 console.log(数据属性在这里); 吗？ - Moduo

我使用 console.log($(this.$el).data('id')); 并成功获取了正确的 data-id，但我不确定这有什么帮助？ - Michael Joseph Aubry

@MichaelJosephAubry 我会存储数据属性，当你进行渲染时，检查它是否已更改。这很简单，对吧？ - Praveen

属性 data-* 永远不会改变，数据存储在对象 $.cache 中，在页面加载时填充并在此后进行操作。此问题先前已被问及：https://dev59.com/QWXWa4cB1Zd3GeqPIwnd - Popnoodles

你不能直接绑定属性更改。我建议在渲染时触发事件或类似的行为，而不是轮询更改，然后您可以在其他地方捕获并作出反应。 - Svend

Answer 1

首先是data属性 - 虽然你可以使用.attr或.prop访问数据属性，但数据存储在页面加载后的对象$.cache中，并在此后进行操作。属性data-*永远不会更新。

要设置数据

$el.data('id', max.cid);

获取数据

var something = $el.data('id');

很遗憾，如果不使用先前在类似问题中探讨过的setInterval，则无法监听数据变化。

话虽如此，如果只有您的代码更新数据，那么一个合理的解决方案是：

设置一个事件

$el.on('datachange', function(){
    // procedure here
});

然后在更新数据时触发它。

$el.data('id', max.cid).trigger('datachange');

或者编写自己的数据函数，使用 .data() 并触发事件。

$.fn.mydata=function(key, variable){
    $(this).data(key, variable).trigger('datachange');
}

$el.mydata('id', max.cid);

---

Example: 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);

- Popnoodles

---

很遗憾，如果不使用setInterval，就没有办法监听数据的变化。那么DOM突变事件呢？ - Givi

@Givi 当数据发生变化时，事件上没有dom突变，我已经尝试过了。更新数据会更新对象$.cache，而不是元素。你可以使用隐藏的文本区域作为数据存储，dom突变会在那里被捕获，但这也不是理想的解决方案。 - Popnoodles

在更新数据（并触发事件）之前，请检查发送的内容是否与设置的内容不同。我不应该为您编写代码来说明这一点。 - Popnoodles

我无论如何还是做了：http://jsfiddle.net/Qn9H6/3/ - Popnoodles

好的，谢谢你查看了它，我很确定既然在那里能够工作，它也会工作。肯定可以给你加一分，感谢你的努力、理解和可运行的模拟代码，一旦我使其工作，我会将它标记为绿色的 :) - Michael Joseph Aubry