html & javascript: как хранить данные, относящиеся к элементам html - PullRequest
Новая
       13

html & javascript: как хранить данные, относящиеся к элементам html

8 голосов
/ 01 июня 2009

Я работаю над веб-приложением, которое использует ajax для связи с сервером. Моя конкретная ситуация такова:

У меня есть список пользователей, выложенных на html-странице. Для каждого из этих пользователей я могу сделать следующее: изменить их «статус» или «удалить» их из учетной записи.

Какая хорошая практика для хранения на странице информации о следующем:

  • идентификатор пользователя
  • текущий статус пользователя

P.S .: Я использую jQuery.

Ответы [ 8 ]

17 голосов
/ 01 июня 2009

Есть функция данных jQuery 

$('li').data('userid',uid); // sets the value of userid
uid = $('li').data('userid'); // retrieves the value of userid

официальная документация: http://docs.jquery.com/Data

8 голосов
/ 03 июня 2009

Существует много споров о том, что лучше всего использовать. Вы можете хранить данные разными способами, и все они делают кого-то счастливым - пользовательские атрибуты, конечно, не будут проверяться, если вы используете XHTML, а использование классов для хранения одного или двух битов данных в лучшем случае неуклюже и ухудшается только с количество вещей, которые вы хотите знать. Лично я не только не большой поклонник XHTML, я также не очень люблю нацистскую валидацию, поэтому я рекомендую использовать пользовательские атрибуты.

Однако существует опция, которая связывает пользовательские атрибуты со стандартами: data- атрибуты. Джон Ресиг (автор jQuery) пишет в своем блоге , что это новый атрибут, введенный в HTML5, который позволяет указывать настраиваемые атрибуты данных с префиксом data- , Поэтому вполне допустимый элемент может выглядеть так: 

<ul>
    <li data-userid='5' data-status='active'>Paolo Bergantino</li>
</ul>

Это имеет то преимущество, что, хотя вы все еще используете пользовательские атрибуты, которые могут быть плохими, если вы используете XHTML, ваш код очень хорошо устареет, так как мы будем хранить данные связанные с конкретным элементом в будущем.

Дополнительное прочтение: Атрибуты> Классы: пользовательские атрибуты DOM для удовольствия и прибыли.

5 голосов
/ 01 июня 2009

Данные jQuery

Если вы хотите сохранить пользовательские данные для объекта jQuery, используйте функцию данных . 

$('#myField').data('name', 'Jack');
var name = $('#myField').data('name');

Данные HTML5- * Атрибуты

Вы также можете использовать атрибуты HTML5 data-*, хотя API для доступа к ним только частично поддерживаются различными браузерами. Вот еще немного информации об этом . 

<div data-userid="123" class="user-row">

программно: 

$('#myElement').attr('data-fruit', 'apple');
// or
document.getElementById('myElement').dataset.fruit = 'apple';

Скрытые поля

Если вы хотите сделать вещи, совместимые со старым браузером, и вставить метаданные прямо в html, вы можете использовать скрытые поля. Это немного грубее, но достаточно легко сделать. 

<input type="hidden" name="UserID" value="[userid]" />

Вы можете легко использовать селекторы jQuery для запроса вашего списка и поиска html-блоков, содержащих пользовательские элементы, у которых есть соответствующие скрытые поля, соответствующие метаданным, к которым вы обращаетесь.

5 голосов
/ 01 июня 2009

Возможно использование пользовательских атрибутов, поэтому для элемента списка пользователя добавьте атрибуты для переменных: 

<li uid="theuserid" ustatus="thestatus"></li>

Значения можно затем получить с помощью функции attr: 

$("li").attr("uid")

А 

$("li").attr("ustatus")

Примечание: Селекторы необходимо изменить, очевидно,

Обратите внимание, что существуют разные мнения относительно использования пользовательских атрибутов - однако, это должно подойти для всех основных браузеров. Это также наименее сложное решение, которое я могу придумать. Не требуется переходить к элементам-братьям и сестрам для получения данных или находить рядом расположенные элементы, что может добавить небольшую нагрузку на обработку - я стараюсь минимизировать количество лишнего содержимого, которое я добавляю в DOM при выполнении таких действий.

2 голосов
/ 03 июня 2009

Плагин метаданных для jquery - ваш ответ. 

<html >
<head>
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.metadata.js"></script>
</head>
<body>
<ul>
<li type="text" class="{UID:'1',status:'alive'}">Adam</li>
<li type="text" class="{UID:'2',status:'alive'}">Bob</li>
<li type="text" class="{UID:'3',status:'alive'}">Carol</li>
</ul>
<script>
$('li').each(function(){window.console.log($(this).metadata().UID)});
</script>
</body>
</html>
2 голосов
/ 01 июня 2009

В этом случае я думаю, что пользовательские атрибуты могут быть излишними. Вы можете сохранить идентификатор пользователя в атрибуте id , так как в списке будет только один экземпляр пользователя, верно? Кроме того, статус пользователя может быть сохранен в атрибуте class . Таким образом, каждому пользователю могут быть назначены разные стили в CSS, такие как зеленый для активной, желтый для неактивированной учетной записи и красный для заблокированной учетной записи.

Однако код для извлечения статуса будет немного сложнее по сравнению с использованием пользовательского атрибута (но только если вы также хотите иметь несколько классов). С другой стороны, при таком подходе HTML будет проверяться, тогда как с пользовательскими атрибутами он не будет проверяться. 

<ul id="userList">
    <li id="uid123" class="active">UserName X</li>
    <li id="uid456" class="suspended">Mr. Troll</li>
</ul>

/**
 * Simple function for searching (strict) for a value in an array
 * @param array arr The array to look in
 * @param mixed val The value to look for in arr. Note that the value is looked for using strict comparison
 * @return boolean true if val is found in arr, else false
 */
function searchArray(arr, val) {
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] === val) {
            return true;
        }
    }
    return false;
}

/**
 * Gets a known status from a string of class names. Each class name should be separated
 * by a space.
 * @param string classNames The string to check for a known status
 * @return string|false The status if found in classNames, else false
 */
function getStatus(classNames) {
    // The different statuses a user can have. Change this into your own!
    var statuses = ['active', 'suspended', 'inactive'], 
        nameArr = classNames.split(" ");
    for(var i = 0, nameLen = nameArr.length; i < nameLen; i++) {
        // If we find a valid status among the class names, return it
        if(searchArray(statuses, nameArr[i])) {
            return nameArr[i];
        }
    }
    return false; // We didn't find any known status in classNames
}

var id = $("li").attr("id"); // Fetches the id for the first user
var status = getStatus($("li").attr("class")); // Fetches the status of the first user
1 голос
/ 01 июня 2009

Чтобы ответить на вопрос «как в первую очередь включить его в документ», я предлагаю макет, подобный следующему: 

<ul id="users">
    <li id="someUserId" class="someStatus">Some Username</li>
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li>
</ul>

Это позволяет вам легко выбирать много информации о ваших пользователях: 

$('#users > li') // all user elements
$('.someStatus') // all users of a particular status

Тогда в ваших обработчиках событий также легко получить текущий статус: 

$(this).attr('class') //get current status once you have a user element selected.

Другая альтернатива - выгрузить javascript на страницу и просто заставить его использовать функцию jquery data для сохранения данных, как только страница загрузится. Вам все равно понадобится идентификатор элемента, чтобы найти правильный.

1 голос
/ 01 июня 2009

Существуют различные способы сделать это в зависимости от того, какие данные вы храните и сколько информации вы храните на странице в целом. Лучше всего разработать согласованную схему, чтобы вы могли написать простой библиотечный вызов для выполнения работы. Например,

Вы можете хранить данные в классе определенного элемента. Это может потребовать дополнительных элементов оболочки, чтобы иметь возможность предоставить дополнительный класс для управления вашим CSS. Это также ограничивает формат сохраняемого контента. Идентификатор пользователя вполне может вписаться в атрибут класса.

Вы можете хранить данные в неиспользованном разделе ссылки, активированной Javascript. У этого есть дополнительная функция показа данных в строке состояния как часть URL на ролловере. Например, вы можете сохранить '#userid' или даже просто 'userid' в href.

Вы можете хранить данные в дополнительных элементах. Например, у вас может быть вложенный div с классом, который указывает на хранилище, которое также запускает CSS, чтобы убрать элемент с экрана. Это самая общая и обширная поддержка, которую вы можете организовать на странице.

Вместо вложенного div вы также можете использовать вложенные теги ввода с type = "hidden". Это более ожидаемое / традиционное решение, не требующее CSS, чтобы убрать их с экрана. Вы можете использовать атрибут id для идентификации этих входов, или вы можете использовать местоположение на странице. Например, поместите их в ссылку, по которой щелкает пользователь, а затем просто выполните поиск внутри текущей ссылки в обработчике onclick.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...