0

アプリでブートストラップ ポップオーバーを使用しており、その中にアウトレットをレンダリングする必要があります。

私はこのネストされたルートを持っています:

this.resource('pages', function(){
    this.resource('page', { path: ':id' }, function(){
        this.resource('edit', function(){
            this.resource('images', function(){
                this.resource('image', { path: ':image_id'}, function(){
                    this.route('edit');
                })
            }); 
        }); 
    });
});

ユーザーがここにいる/pages/1/edit/とき => 画像をクリックするとルーティングされますが、次のようにポップオーバー内を/imagesレンダリングします。{{outlet}}

<div class="popover-content hide">
    {{outlet}}
</div>

これは私のポップオーバーの初期化です:

 $img.popover({
       html: true,
       content: function() { 
       return $('.popover-content').html(); //need to have the outlet here
       }
  });

これまでのところ、アウトレットは正しくレンダリングされていますが、画像テンプレート内には、DOM を変更するボタンがいくつかあり、html は更新されません。ポップオーバーを閉じて再度開くと、変更が表示されない限り。

コード内でアウトレットを直接レンダリングすることは可能ですか? または、ポップオーバーを更新することは可能ですか?

助けてくれてありがとう。

4

2 に答える 2

0

Bootstrap ポップオーバーに Ember のものを配置する別の方法については、次のリンクを参照してください。

ember.js テンプレートを使用したブートストラップ ポップオーバー

https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html

于 2015-01-21T05:41:20.617 に答える
0

Ember と Handlebars はこれを好みません。これは、基本的に div の html コンテンツをコピーして、別の div に挿入するためです。しかし、その html だけでは必要なすべてではありません。Ember は魔法であり、バックグラウンドで多くのことが起こっています。

あなたの非表示の div は本当の残り火なので、.html() を呼び出してそれを台無しにしないようにしましょう。私の考えは、代わりにDOM自体を文字通り移動することです。

最初に、ポップオーバー関数呼び出しを変更して、常にこのプレースホルダー div を作成します。

content: '<div id="placeholder"></div>',

次に、ビューの didInsertElement でコンテンツ div を dom から切り離します。

// get the popover content div and remove it from the dom, to be added back later
var content = Ember.$('.popover-content').detach();

// find the element that opens your popover...
var btn = Ember.$('#btn-popup-trigger').get(0);

// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element
// (this could be improved.  we really just want to know when the popover is opened, not when the button is clicked.)
btn.addEventListener("click", function() {
    content.appendTo("#placeholder");
});

didInsertElement が呼び出されるとすぐにコンテンツ div が切り離されるため、コンテンツ div から「非表示」CSS クラスを削除できます。

編集:私は自分のプロジェクトでこれを試しましたが、双方向バインディングが壊れました。コントローラーはハンドルバー要素を更新しましたが、双方向にバインドされた {{input}} ヘルパーはコントローラー/モデルを更新しませんでした。私は最終的に単一項目のドロップダウンメニューを使用し、これを使用してメニューがすぐに閉じないようにしました: Twitter Bootstrap - 内側をクリックしてドロップダウンメニューを閉じるのを避ける

于 2015-01-21T05:34:55.433 に答える