Question

我很难尝试将SUI模式与SilverStripe连接以动态生成它们。

我希望达到以下目的：

我有按钮（附加事件）来触发带有某些内容的模态。我想循环那些元素（GridField）来动态生成所有内容。但我唯一可以实现的是具有相同＆＃34;触发类的多个模态＆＃34;并且我点击了哪个按钮（第一个，最后一个或其他什么）并不重要。我只有一个模态（层次结构中的最后一个）。如果没有SUI，解决方案就很容易 - 这个＆＃34;这个＆＃34;获取最接近的元素，我可以拥有尽可能多的不同模态，但SUI似乎使事情变得复杂。

我认为最好的解决方案是使用SilverStripe生成一个类/ id并将其传递给JavaScript以与模态一起使用，或者为每个模态使用一个类，并以某种方式通知＆＃34;这个按钮会触发这个模态。

基本上我需要一个代码片段来处理许多模态，而不是很多片段来处理许多模态。我希望问题清楚到底是什么。

这是我的代码：

HTML / SS

（没有特定的SilverStripe标签）

<% loop SomeName %>
    <div class="job-offers">
        <a class="ui right floated button job-application">Click here</a>
    </div>

    <div class="ui basic modal job-application">
        <div class="job-application-sheet">        
            (...)                
            <div class="job-application-sheet-content">
                <div class="ui grid">
                    (...)
                    <div class="ui center aligned container job-application-action">
                        <p>Lorem ipsum</p>
                        <button class="ui primary button">Click here</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<% end_loop %>

的JavaScript

$('.ui.basic.modal.job-application')
    .modal({
        autofocus : false,
        observeChanges: true
    })
    .modal('attach events', '.job-application', 'show');

正如您所见＆＃34;工作申请＆＃34; class是模态的触发器，因此可以将其更改为＆＃34;（this）＆＃34;所以我不必写＆＃34;具体＆＃34;每个按钮/模态的类。或者可能有一个不同/更容易的解决方案？

Answer 1

首先我为我的每个元素生成一个数据类型属性，这些元素在单击它们时会显示一个模态，并且在这个方式中以相同的索引发送到模态：

    <% @relateds_array.each.with_index do |related,i| %>


        <div class="card custom" data-id="<%=i%>">
            <%= render partial: 'my_modal', locals: {index: i} %>
        </div>

    <% end %>

我将模态放在我为此示例调用my_modal的部分中，并使用我作为本地发送的索引为每个模态创建一个唯一的ID，如下所示：

<div class="ui modal" id="modal-<%=index%>">
  <p>blabla things inside this modal.</p>
</div>

然后使用javascript，只需单击该元素的data-id并选择包含该data-id的id的元素，如下所示：

$('.element_that_you_want_to_open_moda_on_click').click(function(event){
    var card_clicked = $(this).attr('data-id');

    $('#modal-' + card_clicked).modal('show');
});

希望这对你有用。请注意，我在本例中使用了Ruby on Rails，但无论您使用何种框架，您应该使用的行为都应该与此类似。

Answer 2

基于Sebastian's解决方案的答案。我做了一些小调整以满足我的需求，就像我使用ID变量来自动获取动态生成的DataObject ID一样。

基本上要在SilverStripe中动态添加语义UI（SUI）模式，首先应该添加＆＃34; data-id＆＃34;在模态触发器中，例如：

Template.ss

<div id="modal-my-item-$ID" class="ui basic modal">
(...)
</div>

然后在模态容器内添加一个＆＃34; id＆＃34;标签，例如：

$('.custom-trigger').click(function(event){
    var triggerItem = $(this).attr('data-id');   

    $('#modal-' + triggerItem).modal('show');
});

最后在JavaScript文件中：

$('.custom-trigger').click(function(event){
    var triggerItem = $(this).attr('data-id');

    $('.ui.modal')
    .modal({
      autofocus: false,
      observeChanges: true
    })

    $('#modal-' + triggerItem).modal('show');
});

我遇到了SUI自动对焦的问题，所以在模态打开后，屏幕显示在底部，按钮放在那里突出显示。

我调整了原始代码段添加SUI设置：

public function init() {
parent::init();

Requirements::javascriptTemplate($this->ThemeDir().'/js/script.js', array(
'SomeField' => $this->SomeField

));
}

如果有人想写＆＃34; data-id trigger＆＃34;手动使用CMS中的字段，然后将$ ID更改为$ SomeField变量。然后通常在.php文件中添加该字段，并在页面控制器中添加如下内容：

pk (personid UNIQUE, fruitid, artificialid UNIQUE)

希望这有助于某人。

使用SilverStripe动态添加语义UI模型

HTML / SS

的JavaScript

2 个答案: