7

ポップオーバーのコンテンツが ember/handlebars テンプレート (バインディングなど) になるように、EmberJS でBootstrap Popoverを使用しようとしています。これはどのように行うことができますか？(エンバー 1.0.0-rc2)

4

5 に答える 5

12

以下は、ember ブートストラップ ポップオーバーの実際の例です ( http://jsfiddle.net/72fSd/を参照)。

App.Popover = Ember.View.extend({
        parentSelector: '',
        contentSelector: '',
        didInsertElement: function () {
            var self = this;
            $(self.parentSelector).popover({
                html: true,
                content: function() {
                    var $content = $(self.contentSelector);
                    return $content.html();
                }
            });
        }

ビューをインスタンス化します。

{{view App.Popover templateName="my-popover-content" parentSelector=".popoverButton" contentSelector="#popovercontent"}}

ここで、parentSelectorは、たとえばボタンを選択する場合があります。contentSelectorを機能させるには、my-popover-content テンプレートに ID #popovercontent の div コンテナーがあることを確認してください。もちろん、ビューを初期化する前にテンプレートをロードする必要があります。

双方向バインディングは、そのソリューションで機能するはずです。

于 2013-04-22T12:42:35.327 に答える
7

私はテリーの答えをもう少し進めて、この問題に対する単純で一般的な解決策を思いついたと思います.

次のように、bootstrap-popover コンポーネントを作成しました。

App.BootstrapPopoverComponent = Ember.Component.extend({
  tagName: 'div',      //whatever default you want... div is default anyway here
  classNames: '',      //whatever default you want
  placement: 'bottom', //whatever default you want
  didInsertElement: function () {
    var component = this,
        contents = this.$('.popoverJs');
    component.$().popover({
      animation: false,
      placement: component.get('placement'),
      html: true,
      content: contents
    }).on('show.bs.popover', function () {
      contents.removeClass('hide');
    });
  },
  willDestroyElement: function () {
    this.$().popover('destroy');
  }
});

関連するテンプレートは次のとおりです。

<script type="text/x-handlebars" id="components/bootstrap-popover">
  {{title}}
  <div class="popoverJs hide">
    {{yield}}
  </div>
</script>

「hide」クラスを使用して、生成されたコンテンツを最初に非表示にしていることに注意してください。このクラスは単純に「display: none」です。これがなければ、物事は期待どおりに機能しません。

それができたら、ポップオーバーが必要なときはいつでも次のようなことをするだけです:

  {{#bootstrap-popover title="My Fancy Popover" tagName="button"}}
    <ul>
      <li>my</li>
      <li>awesome</li>
      <li>popover</li>
      <li>contents</li>
      <li>example</li>
    </ul>
  {{/bootstrap-popover}}

コンテンツは、任意の HTML、コンポーネントまたは部分のレンダリングなど、好きなものにすることができます。当然、他のタグ名、クラス名、タイトル、配置などを必要に応じて指定できます。

この解決策が役立つことを願っています。

于 2014-10-09T20:56:20.570 に答える
2

たとえば、画像をポップアップしたい場合は、ビューで次のようにします

imgTag: '<img src="smiley.gif" alt="Smiley face" height="42" width="42">',

didInsertElement: function () {
    var self = this;
    Ember.run.schedule('actions', this, function () {
        self.$().popover({
            title: 'Smile!!!',
            html: true,
            content: self.get('imgTag'),
            placement: 'bottom',
            trigger: 'hover'
        });
    });
},

willDestroyElement: function () {
    this.$().popover('destroy');
}
于 2013-04-15T11:13:01.390 に答える
1

上記のロバートの答えをもう少し進めました。コンポーネントを作成し、.html() を呼び出す代わりにコンテンツに jQuery 要素を使用するだけです。(これにより、ページ内で ID が重複する問題が軽減されます。)

App.CustomPopoverComponent = Ember.Component.extend({
  tagName: 'button',
  classNames: 'btn btn-default',
  type: 'button',
  popoverContentSelector: '',
  didInsertElement: function () {
    var component = this,
        contents = $(component.get('popoverContentSelector'));

    component.$().popover({
      placement: 'bottom',
      html: true,
      content: contents
    }).on('show.bs.popover', function () {
      contents.removeClass('hide');
    });
  },
  willDestroyElement: function () {
    this.$().popover('destroy');
  }
});

Bootstrap の「hide」クラスを使用して、最初はコンテンツを非表示にしました。次に、ポップオーバーが初めて表示されるときに「非表示」クラスを削除しました。それ以降、物事は期待どおりに機能します。

これは、ハンドルバー テンプレートでコンポーネントを使用する方法です。

  {{#custom-popover popoverContentSelector='.popoverContents'}}
    Popover Button
  {{/custom-popover}}
于 2014-10-09T17:40:39.917 に答える