Octobercms 组件树枝

【问题标题】：Octobercms Component TwigOctobercms 组件树枝
【发布时间】：2016-11-06 20:17:17
【问题描述】：

谁能告诉我如何为组件设置唯一 ID？我只知道我必须把这段代码放在我的 default.htm 中

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

如何在javascript中使用它？

这是干什么用的？

var avatar_{{uid}} = {{ avatar }};

例如这是我的 js

$(function(){
    $("#tab-close").click(function() {        
         $("#tab").addClass("hidden");
    });
});

如何为它设置一个唯一的ID，这样当我复制组件时，两者仍然可以正常工作而不会出错？

【问题讨论】：

标签： javascript html twig uniqueidentifier octobercms

【解决方案1】：

最好用一个标识符封装你的控件，像这样

<div id="mycontrol{{ __SELF__.id }}">
   ...
</div>

然后在JavaScript中，你可以定位里面的元素：

function initTabs(controlEl) {
    var $control = $(controlEl)
    $(".tab-close", $control).click(function() {        
         $(".tab", $control).addClass("hidden");
    });
}

上面的代码针对仅在$control 容器中找到的类名。您可以像这样从标记中调用此函数

<script>
    $(function(){
        initTabs('#mycontrol{{ __SELF__.id }}');
    });
</script>

【讨论】：