javascript - 无法附加 EmberJS 中 {{#if}} 内的 jQuery 插件

Question

在我的 emberjs 应用程序中。我有一堆 jquery 插件，需要绑定(bind)到各种元素。

我正在使用这段代码来启动元素的 jquery 插件。

App.ApplicationView = Ember.View.extend({
    didInsertElement: function(){
        window.appPluginsInit(); // all jquery plugin init

        // chart client init
        var chartClientSettings = {
            serverUrl: config.ajaxUrl
        };

        this.$('.chart-client').chartClient(chartClientSettings);
    }
});

这只适用于最初加载到页面的元素。但例如，如果一个元素位于 {{#if}} 下它似乎没有附加插件。

作品

<button class="chart-client">Show Chart</button>

不起作用

考虑到someVar初始加载时为 false。

{{#if someVar}}
<button class="chart-client">Show Chart</button>
{{/if}}

Answer 1

您可以将 .chart-client 元素设为一个组件，并在组件 didInsertElement 上初始化插件。

组件模板:

<script type="text/x-handlebars" id="components/chart-client">
  Show Chart
</script>

组件:

App.ChartClientComponent = Ember.Component.extend({
  classNames: ["chart-client"],
  tagName: "button",
  chartClientSettings = {
    serverUrl: config.ajaxUrl
  },
  didInsertElement: function () {
      this.$().chartClient(this.get("chartClientSettings"));
  }
});

应用程序 View :

{{#if someVar}}
{{chart-client}}
{{/if}}

JSBin 示例:http://emberjs.jsbin.com/wemujo/1/edit?html,css,js,output