javascript - 将变量值绑定(bind)到 View 或 html 页面的特定部分/div？

Question

每次单击按钮时，按钮都会在我的单页应用程序中动态创建一个 div 元素。现在我想将每个新的 div 元素与其创建的时间戳绑定(bind)。

当单击这些 div 元素中的按钮时，它们应该提醒它们创建的时间戳。

我的代码是这样的

$("#creatediv").click(function() {
    var n = new Date().getTime();
    $("#containerdiv").append("<div id='"+n+"-postfixtext'>"+n+"extrastuff \
        <div id='onemorediv'><button class='showtimestamp'></button></div></div>");
});

$("button.showtimestamp").click(function(){
    alert("the timestamp value is");
});

按钮嵌套级别不具体，所以我不能使用类似的东西

$(this).parent().parent().attr("id").split('-')[0];

获取时间戳的值。

问题:

1. 如何将变量的值绑定(bind)到特定元素及其子元素？
   如果我想更改特定元素中该变量的值，那么应该仅在该元素中更改它

2. 我是否需要使用一个全局对象来存储数据并将该数据的索引作为新创建的 div 中所有子项的 id 传递？

3. 或者使用像 angular.js 或backbone这样的数据绑定(bind)框架会更好吗？如果是的话应该怎么做？

Answer 1

使用 jQuery .data() 方法在创建元素时将元数据添加到元素中。

$("#creatediv").click(function() {
    var n = new Date().getTime();
    var div = $("<div id='"+n+"-postfixtext'></div>");
    div.data('createdTimestamp', n);
    div.append(extrastuff);
    div.append( $("<button>Click for timestamp</button>")
        .data("parentDiv", div)
        .click( function(ev) {
             var parentDiv = $(this).data('parentDiv');
             var createdTimestamp = parentDiv.data('createdTimestamp');
             alert("the timestamp value is" + createdTimestamp);
        })
    );
});

请注意，在我的示例中，从技术上讲，您可以使用 .data() 调用跳过所有设置和查找数据，而只需引用 n 变量直接在 .click() 事件处理程序中。如果你这样做，这将是一个 Javascript 闭包的例子。但我编写的示例更多的是演示 .data() 的用法。

更新

这是上面的示例，编辑为使用闭包，而不是 jQuery 中的 .data() 方法:

$("#creatediv").click(function() {
    var n = new Date().getTime();
    var div = $("<div id='"+n+"-postfixtext'></div>");
    div.append(extrastuff);
    div.append( $("<button>Click for timestamp</button>")
        .click( function(ev) {
             alert("the timestamp value is" + n);
        })
    );
});

您可以直接从 .click() 事件处理程序引用 n 变量，因为 n 仍在事件处理程序内的范围内。这种方式根本不使用 jQuery 的 .data() 方法。