如何检查数据属性是否发生变化？

Question

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

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

我设置了这样的属性,

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

当我的应用重新渲染数据属性时,可能会或可能不会获得新值.我真的不确定如何检查它是否有变化,我已经看到了很多各种脏的黑客和setInterval功能,但没有什么看起来很干净,所以我希望有人知道一个很好的干净方式来做到这一点？

基本上我只想控制元素,如果它从另一个模型渲染新数据(意味着如果另一个模型采用最大值),我需要检查id以确认模型是新版本,并运行动画或渲染它表明它是一个新的模型.

Answer 1

首先是数据属性 - 虽然您可以使用.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);

示例: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);