emberjs 基金会 5 手风琴

Posted 2023-02-19

【中文标题】emberjs 基金会 5 手风琴

【英文标题】：emberjs foundation 5 accordion

【发布时间】：2013-12-16 19:17:33

【问题描述】：

我是 emberjs 的新手，并且有以下包含一些字段的模板，它是固定的，应该匹配模型中的一些字段，但是当我使用带有 ember js 的基础手风琴时，它显示得很好，但是当我点击它，它不会“展开”。

如何让 emberjs 和 Foundation 手风琴一起工作？似乎对 href 的点击会发送到 url 的主题标签

<script type="text/x-handlebars" id="entries">
    <div class="row ">
        <dl class="accordion" data-accordion>
            <dd>
                <a href="#panel1">Accordion 1</a>
                <div id="panel1" class="content">
                    <label>Name</label>
                    input type="text" value=name
                    <div class="row">
                        <div class="large-6 columns">
                            <label>Addresse</label>
                            input type="text" value=adress
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
    </div>

【问题讨论】：

你能告诉我们你是如何为页面添加基础的吗？附加了 dom 对象后，你会调用foundation() 吗？

你有例子吗？您是否在控制台中遇到任何错误？

你为什么不使用 link-to 助手？

@Hrishi ：因为他没有尝试链接到任何资源。 <a> 标签用于触发手风琴。

【参考方案1】：

你应该在视图被插入之后调用foundation()。例如，如果此模板用于 entry 资源，则应在 EntryView 的 didInsertElement 中执行以下操作：

CoffeeScript：

EntryView = Ember.View.extend
  didInsertElement: ->
    @$().foundation()

JavaScript：

var EntryView = Ember.View.extend(
    didInsertElement: function() 
        this.$().foundation();
    
);

【参考方案2】：

我遇到了同样的问题，并通过重新实现 Foundation 的一些行为来解决它。 Foundation 通过在具有content 类的元素上添加和删除active 类来隐藏和显示手风琴部分。

<div class="row ">
    <dl class="accordion" data-accordion>
        <dd>
            <a href="#panel1">Accordion 1</a>
            <div id="panel1" class="content">
                <!-- Closed panel -->
            </div>
        </dd>
        <dd>
            <a href="#panel2">Accordion 2</a>
            <div id="panel2" class="content active">
                <!-- Open panel -->
            </div>
        </dd>
    </dl>
</div>

您可以很容易地在浏览器开发工具中模拟此操作，但您也可以将其绑定到 Ember 操作，如下所示：

//my_view.js

App.MyView = Ember.View.extend(
  actions: 
    toggle: function(selector) 
      this.$(selector).toggleClass("active");
    
  
);

//template.hbs

<dd>
  <a action "toggle" "#panel1" target="view">Accordion 1</a>
  <div id="panel1" class="content">
    <!-- Closed panel -->
  </div>
</dd>

神奇之处在于action 帮助器，它触发视图中定义的toggle 操作中的功能。您将内容 div 的 ID 作为选择器传递给切换函数，然后由 jQuery 打开或关闭其 active 类。

需要注意的是 target="view" 告诉 Ember 在视图上使用 action，而不是转到您所在的 Ember Route。如果这对您来说看起来很乱，您可以将 toggle 操作放在您的 Route 类上，但对我来说它更像是查看功能。