javascript中的数据绑定

Question

我正在尝试为个人项目实现一个简单的通知系统，但我陷入了如何将事件绑定到通知以响应用户操作（如接受或拒绝）的问题。

到目前为止，我得到的是一个动态创建的对象。

/* reference to notifications */
var notifications = [];

// the notification object
var Notification = function(travelInfo){
    this.el = $('#notifications_container');
    this.id = Math.random().toString().substring(7);
    this.travelInfo = travelInfo;
    this.read = false;

};


Notification.prototype.init = function(){
    this.addOne();
    this.render();
    this.bindFunctions();
}

/* dynamically created */
    for(var i = 0; i < 10; i++){
        var notification = new Notification(travelInfo);
        notifications.push(notification);
        notification.init();
    }

该对象应该渲染事件并将事件实际绑定到渲染元素，以便独立跟踪每个通知的操作：

// render the view of a notification
Notification.prototype.render = function(){
    var source = $('#notification-template').html();
    var template = Handlebars.compile(source);
    var data = this.travelInfo;
    result = template(data);
    $('#notifications_container').append(result);
}

Notification.prototype.addOne = function(){
    var number = +$('#notifications_indicator').html();
    $('#notifications_indicator').html(number += 1);
}

Notification.prototype.removeOne = function(){
    var number = +$('#notifications_indicator').html();
    $('#notifications_indicator').html(number -= 1);
}

Notification.prototype.alertId= function(){
    alert('the notification with id:' + this.id + ' is accepted');
}

Notification.prototype.bindFunctions = function(){
    var self = this;
    this.el.on('click', 'li .accept', function(){
        self.alertId();
    });
}

我的方法的问题在于，实际上如果我创建 10 个元素，点击事件会触发 10 次，显示 10 个警报。我想知道的是如何实现一个系统，在该系统中我渲染一个元素并将事件绑定到该元素，就像主干将事件绑定到每个视图项的方式一样。我觉得骨干对于我现在需要的东西来说是如此之大，这只是通知系统。我希望你们能帮助我找到一种方法来做到这一点。

Answer 1

如果我没看错你的问题，那你有点想多了。

我相信您正在寻找这样的东西：

<div>
<!-- This is where your HTML is -->
<button type="button" data-post-id="10">Delete this post</button>
<button type="button" data-post-id="11">Delete this post</button>
</div>

现在，在您的 onclick 处理程序上：

function handleDeleteClick() {
  // `this` should be a reference to the element.
  postId = this.getAttribute("data-post-id");
  // Do something with postId
}

完成代码...

element.setAttribute("data-post-id", "11");
element.removeAttribute("data-post-id");