Ajax jQuery Лучшие практики: избегать встроенного скрипта ?? тогда как мне передать переменные

Question

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

Однако я хочу спросить, что мне делать, если мне нужно передать переменные на стороне сервера в javascript. Вроде рассмотрим следующий код ...

<?php foreach($product as $product_id): ?>
<input type="button" value="Delete Favorite" onclick="delete_favorite('<?php echo $product_id; ?>')" />
<?php endforeach; ?>

Должен ли я использовать скрытые значения формы для такого случая? или может быть добавление добавления серверной переменной в id элемента, для которого я определяю поведение? вот так ..

<input type="button" value="Delete Favorite" id="button<?php echo $product_id; ?>" />

Есть предложения?

Answer 1

Есть несколько вещей, которые вы можете сделать, одним из них будет использование пользовательского атрибута, например data-product-id (префикс data- указан в спецификации HTML5, я считаю).

Хотя вы также можете указать input id, например, product-343, а затем получить идентификатор, используя ...

$(this)[0].id.replace(/\D/g, '');

(предположим, this указывает на элемент input).

Answer 2

Использовать data- атрибут префикса.http://jsfiddle.net/zJWfB/

Answer 3

Попробуйте это:

<?php foreach($product as $product_id): ?>
    <input id="fav-<?php echo $product_id; ?>" class="prod-fav" type="button" value="Delete Favorite"/>
<?php endforeach; ?>

<script type="text/javascript">
    $(function(){
        $(".prod-fav").click(function(){
                    var $this = $(this);
            var id = $(this).attr("id").replace(/[^0-9]/g, "");
            delete_favorite(id); // Call delete_favorite or
                    //delete_favorite.call($this, id); //To retain the calling element context or
                    // implement you delete function right here..
        });
    });

</script>