0

で遊んでいて、データ変更時にEmber.jsを更新するためのベスト プラクティスは何かと考えていました。DOM

具体的には、モデルのインスタンスごとに開くボタンと閉じるボタンを備えた仕切りがあります。モデル オブジェクトの状態が「開いている」場合は開くボタンを非表示にし、モデルの状態が「閉じている」場合は閉じるボタンを非表示にしたい。

私が知る限り、いくつかのオプションがあります。

jQueryA）コントローラーによって呼び出されたビューで、DOMの要素を直接変更します

B）テンプレートを自動リロードするオブザーバーをセットアップし、if/else更新されたモデルパラメーターに基づいて変更する必要があるステートメントをテンプレートに含めます。

それらのいずれかが優先されますか（またはどちらも優先されませんか）？あなたたちはどうしますか？

4

2 に答える 2

2

これが他のビュー/タブに実装されていることを示すこのフィドルを見てください。このサンプルでは、​​の代わりに単純なものを使用していますが、必要なことを実行します。Em.ControllerEm.CollectionController

私は2つのcssクラスを持っています：

.visible {visibility: visible}
.invisible {visibility: hidden}

次のビューはclassNameBinding、子ビューでそれらを使用しています。contentBindingそして、コントローラーでモデルをポイントしてモデルを親ビューにバインドすると、子ビューにcurrentStateは親のプロパティを監視するプロパティがあります。この子ビューをクリックすると、currentState「closed」に設定され、IsVisibleメソッドが再度評価され、適切な値がclassNameBindingに送られます。

App.OtherView = Em.View.extend({
    templateName: 'other',
    contentBinding: 'controller.content',
    currentStateBinding: 'controller.content.state',
    ButtonView: Ember.View.extend({
        tagName: 'a',
        click: function(e) {
            this.set('parentView.currentState', 'closed');
        },
        classNameBindings: 'IsVisible:btn visible:invisible',
        IsVisible: function() {
            return this.get('parentView.currentState') === 'open';
        }.property('parentView.currentState')    
    })        
});

テンプレートの設定方法は次のとおりです

<script type="text/x-handlebars" data-template-name="other" >
    <h2>Other</h2>
    ID: {{content.id}}<br />
    Name: {{content.name}}<br />
    State: {{content.state}}<br />
    {{#view view.ButtonView }}
        Close
    {{/view}}            
</script>

または、このサンプル（ここにソースがあります）は、を使用して同じ機能を実現する方法の概念が非常に似ています.propertyが、これはもう少し複雑で、ナビゲーションバーメニュー用です。私がどのようにやっているかを確認してください。あなたは私が持っているApp.NavigationViewという名前の子ビューを見つけるでしょう。これは、コントローラーでプロパティの値をチェックしてから、ビューでチェックします。その比較はtrueまたはfalseを返し、関数プロパティを呼び出す式に基づいてクラス名を設定します。これは、あなたの質問に基づいて作成した最初のフィドルとほぼ同じです。NavigationItemViewclassNameBindingisActive

お役に立てれば。

于 2012-11-12T22:06:40.483 に答える
1

質問を詳しく説明する必要があると思います。これは、あなたの質問に対する現在の理解に基づいた私の答えです。これまで私が学んだ限りでは、DOM を手動で更新することを心配する必要がないことは、EmberJS の強みの 1 つです。モデルまたはコントローラー オブジェクトを更新するだけで、すべての変更が DOM に自動的に反映されます。

よろしくお願いします、

于 2012-11-12T15:24:55.510 に答える