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() 方法。