Привязка данных в JavaScript

Question

Привязка данных в JavaScript

0

Я пытаюсь внедрить простую систему уведомлений для личного проекта, но я застрял в том, как привязывать события к уведомлениям, чтобы реагировать на действия пользователя, например, принимать или отклонять.

Пока что я получил объект, который создается динамически.

/* 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 элементов, событие click срабатывает 10 раз, показывая 10 предупреждений. Я хочу знать, как я могу реализовать систему, в которой я создаю элемент, а также привязывать события к этому элементу, что-то вроде базового способа привязки событий к каждому элементу представления. Я чувствую, что позвоночник настолько велик для того, что мне нужно сейчас, это просто система уведомлений. Надеюсь, вы, ребята, могли бы помочь мне найти способ сделать это.

Jhonnatan Gonzalez Rodriguez 28 апр. 2014, в 22:46

Источник

0

Вы привязываетесь к событию click 10 раз, не можете ли вы привязаться к самому элементу, по которому щелкают? Если нет, то можете ли вы просто посмотреть, привязали ли вы контейнер один раз, а потом снова не связывать?
Jason Goemaat 28 апр. 2014, в 20:09
0

какие события вы пытаетесь связать с объектом.
Muhammad Umer 28 апр. 2014, в 20:09
0

@MuhammadUmer Я хочу, например, привязать событие, когда вы нажимаете кнопку «Принять» в уведомлении, чтобы установить состояние чтения объекта с false на true.
Jhonnatan Gonzalez Rodriguez 28 апр. 2014, в 20:11
0

@JasonGoemaat хорошо, на самом деле я хочу сохранить отношение элемента DOM к объекту, созданному, но не знаю, как этого добиться
Jhonnatan Gonzalez Rodriguez 28 апр. 2014, в 20:12

Показать ещё 2 комментария

Теги:

javascript

jquery

object

oop

backbone.js

1 ответ

Ещё вопросы

Вы привязываетесь к событию click 10 раз, не можете ли вы привязаться к самому элементу, по которому щелкают? Если нет, то можете ли вы просто посмотреть, привязали ли вы контейнер один раз, а потом снова не связывать?
какие события вы пытаетесь связать с объектом.
@MuhammadUmer Я хочу, например, привязать событие, когда вы нажимаете кнопку «Принять» в уведомлении, чтобы установить состояние чтения объекта с false на true.
@JasonGoemaat хорошо, на самом деле я хочу сохранить отношение элемента DOM к объекту, созданному, но не знаю, как этого добиться

Jeremy J Starcher · Answer 1 · 2014-04-29T02-34-00.000Z

Если я правильно читаю ваш вопрос, вы немного задумываетесь об этом.

Я считаю, что вы ищете что-то вроде этого:

<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");

Ну, на самом деле я думал так, потому что каждый объект приносит определенные данные, такие как имя пользователя и другую информацию, поэтому я хотел, чтобы данные этих элементов были привязаны к объектам, но, следуя вашему совету, вы могли бы сделать что-то вроде сохранения каждого уведомления в массиве уведомлений ant затем создайте уведомление div как data-id="0" а затем в обработчике кликов возьмите этот идентификатор как ссылку на уведомление, по которому щелкнули, и выполните действие, как вы думаете, это хороший подход?