Хранение состояния/свойства элемента на странице?

Question

[hashspark]

Добрый вечер.

Не являюсь специалистом в данной области и поэтому возник такой вопрос. Сейчас попробую объяснить всё на примере:

Есть некий статичный html, который отдается бекенд частью. И пусть это будет список кинофильмов, при нажатии на один из них необходимо отправить ajax запрос и получить список главных героев/оценку/описание.
Запрос формируется на www.site/api_url/<id_фильма>

А теперь собственно сами вопросы:

1. Где хранить <id_фильма>?
1a. Большой ли моветон хранить их в аттрибуте data-cinema-id="<id_фильма>"?
2. Ну и вообще как правильно организовать получение данных из DOM в переменные js и обратно?

upd
Дописали функционал и это уже страница редактирования этих фильмов. К которому соотносится список актёров с со своими id-actor и в какой то момент актёров можно менять) вопросы всё теже.

Да я слышал про ajgularJS и про backbone, но тут как я понимаю пушкой по воробьям.

Answer 1

[Петруша Укропов]

1а. Даже наоборот, это верное решение

Answer 2

[Владлен Грачев]

Вообще непонятно, зачем понадобился тот же AngularJS.
ID фильма вполне приемлемо хранить в атрибуте id элемента списка фильмов. Он же будет такой один на страницу все равно, насколько я понимаю.
Допустим, у вас список вроде следующего:

<ul id="films">
<li><a id="1" href="">Фильм1</a></li>
<li><a id="2" href="">Фильм2</a></li>
<li><a id="3" href="">Фильм3</a></li>
</ul>

Предположим, у вас используется jQuery (наверняка же используется?), тогда пишем что-то вроде следующего:

$(document).ready(function(){
    $('#films a').click(function(){
        var film_id = this.id;
        // Тут ajax-запрос и манипуляция с данными полученными
    });
});

Хотите хранить в своем атрибуте — храните.
Если задача более специфичная или есть какие-то еще нюансы, уточняйте.

Comments

[hashspark]

Да, тогда усложним задачу например если надо этот id сменить. Тогда к примеру, это страница редактирования этих фильмов. К которому соотносится список актёров с со своими id-actor и в какой то момент актёров можно менять) ну такой не очень пример вышел.

[Владлен Грачев]

@hashspark Как-то совсем ничего непонятно. Надо рассматривать более четкую задачу. Я бы хотел иметь возможность в какой-то фильм воткнуть любимого актера, однако ж...
А что касается смены id, то тут аж два варианта:
$(this).attr('id','newID');
this.id='newID';

[Сергей Протько]

атрибут id не для этого придумали. Вдруг у вас будет несколько ссылок на один и тот же фильм?. Для этих целей и была введена спека по data-* атрибутам и ненадо ничего выдумывать. Сменить можно так же - либо через attr (поменяется значение атрибута) или что лучше - через метод data

[Владлен Грачев]

@Fesor, атрибут id служит для однозначной идентификации элемента в DOM. Я уточнил в самом начале, что это для случая с одним упоминанием фильма на страницу. Так же как и уточнил, что хранение в data-атрибуте не имеет минусов.
Шутку про то, что рамы для велосипедов, разрабатываемые программистами, рассчитаны на полет в космос и глубоководные погружения, уже слышали?
Надо решать задачи, которые поставлены, с учетом спектра задач, который может возникнуть в дальнейшем с достаточной вероятностью.
Если вам будет от этого легче, да, я тоже считаю, что работать по спецификациям и общим стандартам - это хорошо.

Answer 3

[Илья Милошевич]

Допустим, такая структура:

<ul id="films">
  <li><a href="www.site/api_url/1">Фильм 1</a></li>
  <li><a href="www.site/api_url/2">Фильм 2</a></li>
  <li><a href="www.site/api_url/3">Фильм 3</a></li>
</ul>

Может быть, в данном случае и не нужен атрибут id:

$(document).ready(function(){
    $('#films a').click(function(){
        var href = this.href;
        // Ajax-запрос на адрес www.site/api_url/<id_фильма>, т.е. href
    });
});

Comments

[Сергей Протько]

лучше так не делать а использовать data-* атрибуты...

[aen]

А кто будет отменять дефолтное действие? В данном случае у вас произойдет переход на страницу по адресу href и обработчик уже не сработает.

[Илья Милошевич]

Да, забыл написать preventDefault.