将Javascript对象绑定到HTML元素

时间:2013-03-10 12:55:07

标签: javascript jquery html data-binding

我只想与大家分享经验。所以我的问题是,我遇到了将javascript后端对象绑定到HTML前端元素的问题。现在,我已经通过谷歌搜索并阅读了一些有关此问题的stackoverflow文章,许多帖子回答这是使用jQuery.data(),但是在我的第一次尝试中我没有成功,因为有一些我不知道的jQuery的对象创建方法。我的问题是,我想在我存储它的范围之外检索存储的数据,并且当我编写jQuery('selectorID')时,jQuery总是(我认为)返回一个新的对象引用。例如:

var ref1 = $('#myID');
var ref2 = $('#myID');

if(ref1 == ref2)
{
   alert(true);
}
else
{
   alert(false);
}

总是警告错误。无论用javascript的内置getElementById()替换jQuery方法,我们都会得到相同的参考!因此,以下代码将始终警告真实!

var ref1 = document.getElementById("myID");
var ref2 = document.getElementById("myID");

if(ref1 == ref2)
{
   alert(true);
}
else
{
   alert(false);
}

我的故事的小小士气是,如果你想将javascript对象全局绑定到HTML元素并且正在考虑使用jQuery的data()方法,那么将数据存储在返回的引用上通过javascript的内置getElementById() 。这样,当您使用getElementByID检索引用时,将始终获得相同的引用,并可以使用jQuery的data()方法从中获取数据。

我的问题:

  1. 我的思维逻辑是否正常?
  2. 有没有更好的方法将javascript对象全局绑定到HTML元素?

4 个答案:

答案 0 :(得分:1)

无论你提到的代码背后的原因是什么,显然不是 jQuery为每个查询提供了一个新的集合。鉴于HTML:

<div id="somediv"> foo bar </div>

以下Javascript works as expected

var $ref1 = $('#somediv');
var $ref2 = $('#somediv');

console.log("$ref1:", $ref1);
console.log("$ref2:", $ref2);

// compare the collections / references
console.log("$ref1 == $ref2:", $ref1 == $ref2); // => false
console.log("$ref1 === $ref2", $ref1 === $ref2); // => false

// compare the referred DOM elements themselves
console.log("$ref1[0] == $ref2[0]:", $ref1[0] == $ref2[0]); // => true
console.log("$ref1[0] === $ref2[0]", $ref1[0] === $ref2[0]); // => true


$ref1.data('somedata', 'SOMEDATA');
console.log('$ref1->somedata:', $ref1.data('somedata')); // => SOMEDATA
console.log('$ref2->somedata:', $ref2.data('somedata')); // => SOMEDATA

答案 1 :(得分:0)

我这样做的方式是这样的。

var ref1 = $('a');
var ref2 = $('div');

var equal = ref1.length === ref2.length;
if (equal) {
    $.each(ref1, function(i) {
        equal = equal && ref1[i] === ref2[i];

        if (!equal) {
            return false;
        }
    });
}

if (equal) {
    alert(true);
} else {
    alert(false);
}

答案 2 :(得分:0)

ref1[0] === ref2[0] // Should return true

我认为jQuery的实例是唯一的,因此您可以比较匹配的项目,当您引用ID时,这些项目应该只是一个元素。

你可以这样做:

var ref1 = $('#myID')[0];
var ref2 = $('#myID')[0];

答案 3 :(得分:-1)

我深入研究jQuery的源代码,找到jQuery的构造函数。如下:

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

每当您使用ref2 = $('#myID')来检索相应的jQuery元素时,jQuery都会为您创建一个新对象。因此,==将向您返回false,因为这两个元素与js对象引擎完全不同。

似乎getElementById方法更适合您的需要。但我不知道js引擎如何执行getElementById方法。