2

我有一个迭代控制器数组的模板 - 由于某种原因我不能使用 jquery-ui 手风琴功能 - 我认为这是由于添加的标记 ember 添加到 html 例如<script type="text/x-placeholder" id="metamorph-1-start"></script>

有什么想法我该如何解决这个问题？

这是代码：

<div id="chat-tab-container">

                <script type="text/x-handlebars">
                    {{#each App.chatTabsController}} 

                        <h3 class="row1">
                            <div class="avatar " style="background: red;">*</div>
                            <div class="contact-name ">{{contactName}}</div>
                        </h3>
                        <div class="row2">
                            <div class="contact-name ">content</div>
                        </div>

                        <h3 class="row1">
                            <div class="avatar " style="background: red;">*</div>
                            <div class="contact-name ">boni</div>
                        </h3>
                        <div class="row2">
                            <div class="contact-name ">content</div>
                        </div>

                    {{/each}}
                </script>

            </div>

和 jquery 调用：$('#chat-tab-container').accordion()

4

2 回答 2

3

正如 Cory 提到的，问题是当您调用手风琴方法时，手风琴的内容没有呈现/插入到 DOM 中。一种解决方法是使用 ember 视图作为包装器并在 didInsertElement 方法中调用手风琴方法。我提供了一个可行的例子。

基本上您的模板更改为：

<script type="text/x-handlebars">
  {{#view App.TabView}}                     
    {{#each App.chatTabsController.content}} 
      <h3>{{contactName}}</h3>
      <div>content for {{contactName}}</div>
    {{/each}}
  {{/view}}
</script>

​查看代码：

App.TabView = Ember.View.extend({
    tagName: 'div',        
    didInsertElement: function() {
        this.$().accordion();
    }
});​
于 2012-05-16T17:17:07.903 回答
1

这应该可以正常工作，因为我在项目中使用它没有问题。页面完全加载后，您是否尝试过从控制台调用 $('#chat-tab-container').accordion() ？jQuery 小部件的问题通常源于内容未呈现或在内容控制器更改时重新呈现的事实。

这可以通过以下几种方式克服：

  1. 使用 Ember.View 并挂钩到 didInsertElement 或 afterRender 回调。
  2. 如果您的视图因内容更改而更新很多，您可以添加一个事件侦听器以在鼠标进入小部件 UI 区域时调用 $('#chat-tab-container').accordion()。我在 sortables、accordions 和 draggables 中经常使用这种方法。

下面是一个例子：

$('body').on( 'mouseover', '#chat-tab-container', function(){
  $(this). accordion();
});
于 2012-05-16T16:39:54.843 回答