Jquery ui 无法使jqueryui选项卡在Ember视图中正常工作

目前，我正在尝试在Ember.JS中运行一个小原型，以期将web应用程序的UI完全重新编写为一个针对WebAPI运行的Ember应用程序，但是尽管我已经设法使Ember正常运行，但我无法让jqueryui正确初始化选项卡

如果我在视图中为要创建的选项卡放置静态数据，那么它似乎可以正常工作，但是如果我使用动态数据，那么它就不起作用

我有一个余烬视图模板

<script type="text/x-handlebars" id="index">
    <div id="tabs" class="ui-tabs">
        <ul>
            {{#each model}}
            <li>
                <span class="ui-icon ui-icon-person"></span>
                <a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
            </li>
            {{/each}}
        </ul>

        {{#each model}}
        <div {{bindAttr id="tabTitle"}}>
            <p>
                Retrieving Data - {{title}}
            </p>
        </div>
        {{/each}}
    </div>
</script>

还有一个模型

App.Section = DS.Model.extend({
    name: DS.attr('string'),
    title: DS.attr('string'),
    tabTitle: function () {
        return 'tab-' + this.get('name');
    }.property("name"),
    route: function () {
        return '#' + this.get('tabTitle');
    }.property("tabTitle")
});

App.Section.FIXTURES = [
    {
        id: 1,
        name: 'home',
        title: 'Home'
    },
    {
        id: 2,
        name: 'users',
        title: 'Users'
    }
];

它似乎正确地生成了HTML（通过检入Firebug），但这不起作用，好像我用

<script type="text/x-handlebars" id="index">
    <div id="tabs" class="ui-tabs">
        <ul>
            <li>
                <span class="ui-icon ui-icon-person"></span>
                <a href="#tab-home" title="tab-home"><span>Home</span></a>
            </li>
            <li>
                <span class="ui-icon ui-icon-person"></span>
                <a href="#tab-users" title="tab-users"><span>Users</span></a>
            </li>
        </ul>

        <div id="tab-home">
            <p>
                Retrieving Data - Home
            </p>
        </div>
        <div id="tab-users">
            <p>
                Retrieving Data - Users
            </p>
        </div>
    </div>
</script>

这样做的问题是：1）它要求我知道将写入视图的最后一个元素的名称（显然，对于动态数据，我不一定知道），以便我可以不断检查它；2）这种技术的低效让我想尖叫

此外，我们在渲染后得到一个很好的旧FoUC（未设置样式内容的Flash），但在我们让JQueryUI正确设置样式之前

---

感谢您的建议。

还是不太好。。。但这至少是可行的，而且相当有效

从中我发现了如何编写触发器，并且由于运行循环的工作方式，在页面的最后一个循环中插入触发器会导致调用它n次，但只有在循环完成后，所以快速状态检查“hasBeenTriggered”确保只执行一次delgate函数

我的代码现在如下所示：

<script type="text/x-handlebars" id="index">
    <div id="tabs" class="ui-tabs">
        <ul>
            {{#each model}}
            <li>
                <span class="ui-icon ui-icon-person"></span>
                <a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
            </li>
            {{/each}}
        </ul>

        {{#each model}}
        <div {{bindAttr id="tabTitle"}}>
            <p>
                Retrieving Data - {{title}}
            </p>
        </div>
        {{trigger "triggered"}}
        {{/each}}
    </div>
</script>

和视图

App.IndexView = Ember.View.extend({
    templateName: 'index',

    hasBeenTriggered: false,

    triggered: function () {
        if (!this.get("hasBeenTriggered")) {
            var tabs = $('#tabs').tabs();
            this.set("hasBeenTriggered", true);
        }
    }
});

我很想知道是否有更好的方法可以做到这一点，因为这仍然不能解决FOUC问题（这同样可以通过更多的JS黑客来实现）(

<script type="text/x-handlebars" id="index">
    <div id="tabs" class="ui-tabs">
        <ul>
            {{#each model}}
            <li>
                <span class="ui-icon ui-icon-person"></span>
                <a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
            </li>
            {{/each}}
        </ul>

        {{#each model}}
        <div {{bindAttr id="tabTitle"}}>
            <p>
                Retrieving Data - {{title}}
            </p>
        </div>
        {{trigger "triggered"}}
        {{/each}}
    </div>
</script>

Ember.Handlebars.registerHelper('trigger', function (evtName, options) {
    options = arguments[arguments.length - 1];
    var hash = options.hash,
        view = options.data.view,
        target;

    view = view.get('concreteView');

    if (hash.target) {
        target = Ember.Handlebars.get(this, hash.target, options);
    } else {
        target = view;
    }

    Ember.run.next(function () {
        target.trigger(evtName);
    });
});

App.IndexView = Ember.View.extend({
    templateName: 'index',

    hasBeenTriggered: false,

    triggered: function () {
        if (!this.get("hasBeenTriggered")) {
            var tabs = $('#tabs').tabs();
            this.set("hasBeenTriggered", true);
        }
    }
});