1

私は動的ダッシュボードを作成しており、現在、ウィジェットの ContainerView と childViews を使用してそれを達成しようとしています。私が今やりたいことは、グループ化、または子のサブセットの周りに div をラップすることです。適切な例を挙げると、4 つの子ビューを作成するとします。

App.IndexView = Ember.ContainerView.extend({
    classNames: ['dashboard'],
    childViews: ['LinechartView', 'TableView', 'BarchartView', 'TabletwoView'],
    ...

そのため、期待どおりにうまく機能し、それぞれの周りに 4 つの div を作成するだけです。しかし、私が今やりたいことは、最初の 2 つと 2 つ目の 2 つを div で囲んで、それらを同じ「行」に配置できるようにすることです (ブートストラップを使用)。行ごとに子ビューを作成する必要があると思いますか?それは、各要素または列がその子ビューである別のコンテナービューです? それとももっと簡単な方法がありますか？

明確にするために、現在私の DOM 構造は次のようになっています。

<div id="ember308" class="ember-view dashboard">
    <div id="ember311" class="ember-view">LinechartView</div>
    <div id="ember314" class="ember-view">TableView</div>
    <div id="ember317" class="ember-view">BarChartView</div>
    <div id="ember320" class="ember-view">TabletwoView</div>    
</div>

そして、DOM構造を次のようにしたい:

<div id="ember308" class="ember-view dashboard">
    <div class="row">
        <div id="ember311" class="ember-view span6">LinechartView</div>
        <div id="ember314" class="ember-view span6">TableView</div>
    </div>
    <div class="row">
        <div id="ember317" class="ember-view span6">BarChartView</div>
        <div id="ember320" class="ember-view span6">TabletwoView</div>
    </div>
</div>

追加の span6 クラスではなく、ビューの周りに行をラップすることが重要です。これ以上の助けをいただければ幸いです。乾杯。

4

2 に答える 2

0

プライマリ テンプレートにラップされたセカンダリ テンプレートが必要な場合はいつでも、レイアウト プロパティを使用できます。

http://emberjs.com/api/classes/Ember.View.htmlに移動し、レイアウトに移動して API を確認します。

テンプレートによってサポートされるようにするには、layoutName プロパティを使用します。

于 2013-03-25T20:36:36.720 に答える
0

更新: 入れ子containerviewになっていると、すぐに複雑になります。たとえば、3x2 グリッドがあり、ユーザーがウィンドウのサイズを変更すると、一番上の行に 4 を表示し、2 番目の行に 2 を表示したいとします。行にネストされたコンテナー ビューを使用します。

ユーザーが望むものに基づいてダッシュボードのコンテンツを動的に変更したい場合 (つまり、3 つのウィジェットを持っているものもあれば、15 個のウィジェットを持っているものもあり、ドラッグ アンド ドロップして並べ替えることができます)、1 つのレイヤーに固執するのが最も理にかなっていると思います。containerview、CSS を使用してそれらをグリッドにスタイル設定します。基礎となる DOM が実際には div のリストである間に、正方形のグリッドを「シミュレート」できます。例を次に示します: http://yaleclassroulette.com/。同位体ライブラリを使用します: http://isotope.metafizzy.co/index.html .

オリジナル: あなたのソリューション (ネストさcontainerviewsれた行のインナーロンを作成する) は機能しますが、なぜコンテナー ビューが必要なのか知りたいです。

コンテナ ビューを捨てて、代わりにテンプレートでレイアウトを行うことを検討しましたか? したがってApp.IndexView、 からContainerViewテンプレートに基づくビューに変更します。テンプレートは好みに合わせて構成でき、{{outlet}}またはを使用してその子ビューを埋めることができます{{view}}。

例：

index_view.js:

 App.IndexView = Ember.View.extend({
   templateName: "index.hbs"

index.hbs:

 <div class="row1">
     {{view App.LinechartView stuffBinding="whatever.you.need.for.initialization"}}
     {{view App.TableView stuffBinding="whatever"}}
 </div>
 <div class="row2">
     {{view App.BarchartView stuffBinding="whatever"}}
     {{view App.TabletwoView stuffBinding="whatever"}}
 </div>

表示内容をより詳細に制御したい場合は、ビューをアウトレットに置き換えることができます。一般にContainerView、ビューをプログラムで制御し、構造をあまり気にしない場合に使用されます。この場合はどうしますか?

于 2013-03-25T20:22:32.767 に答える