Question

我有一个迭代控制器数组的模板 - 由于某种原因我无法使用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()

Answer 1

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

基本上您的模板更改为：

<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();
    }
});

Answer 2

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

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

使用Ember.View并挂钩到didInsertElement或afterRender回调。
如果由于内容更改而导致视图更新很多，则可以添加一个事件侦听器，以便在鼠标进入窗口小部件UI区域时调用$（'＃chat-tab-container'）。accordion（）。我对可排序，手风琴和可拖动的人使用这种方法很多。

以下是一个例子：

$('body').on( 'mouseover', '#chat-tab-container', function(){
  $(this). accordion();
});

我可以使用带有jquery-ui手风琴的ember.js

2 个答案: