Nano Hash - криптовалюты, майнинг, программирование

Уникальный идентификатор компонента Octobercms (Twig и Javascript)

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

{% set uid = '{{__SELF__.id}}' %}

но я не знаю, как связать это с моим JavaScript... Я пробовал несколько способов, но все еще не могу понять это правильно

1) default.htm

<div id="tab" data-id="{{__SELF__.id}}" class="draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

это мой js

$(function() {
                    $( "#tab" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

есть ошибка: "Uncaught TypeError: $(...).data(...).draggable не является функцией"

2) default.htm

<div id="tab{{__SELF__.id}}" class="draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

это мой js

$(function() {
                    $( "#tab{{__SELF__.id}}" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

3) default.htm

{% set uid = '{{__SELF__.id}}' %}

<div id="tab" class="draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

это мой js

var tab_{{uid}} = $(function() {
                    $( "#tab" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

window[tab_{{uid}}]();

может кто-нибудь показать мне, как это сделать?

javascript function jquery twig octobercms
01.07.2016

Ответы:


1

$("#x") возвращает объект jQuery с идентификатором x.
$("#x").data("y") возвращает значение тега data-y в объекте jQuery, который имеет x в качестве идентификатора.
draggable() не может применяться к значению.

Итак, попробуйте что-то вроде этого:

<div id="tab{{__SELF__.id}}" class="my-tab draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

а также

$(function() {
    $(".my-tab").draggable({ 
        axis: "y", 
        containment: "window"
        });
});

Вы можете использовать функцию each() следующим образом:

$(".my-tab").each(function(){
    var myId = $(this).attr('id');
    // Do Something with your unique Id
    $(this).draggable({ 
            axis: "y", 
            containment: "window"
    });
});
01.07.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..