Marionette.jsの動作の概要

この投稿では、新しいMarionette.jsの機能-Behaviorsについて学習します。



多くの場合、インターフェイスのさまざまな要素に類似のコントロールがあります（たとえば、[削除]ボタンはカテゴリ、レコード、登録ユーザーのリストに表示されます...はい）、各ビューでこのボタンのハンドラーを記述する必要があるたびに、そしてどこでも同じです。

しかし、これはすでにコード複製と呼ばれ、ほとんどの社会では歓迎されていません。 そのため、Marionette.jsの開発者はBehaviorsなどのすばらしい機能を提供してくれました。



Behaviorsは、DOMユーザーインタラクションの記述を個別の論理的なコードに分離するためのインターフェイスを提供します。 動作は、任意のビューに何度でも適用できます。



この記事では、最も単純な例である「削除」ボタンを検討します。

ビヘイビアはどのように記述され、どこに保存されますか？

ビヘイビアを使用するには、最初にマリオネットにビヘイビアの保存場所を伝える必要があります。 このように行われます

var Behaviors={}; Backbone.Marionette.Behaviors.behaviorsLookup = function() { return Behaviors; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

保管場所を変更できます。

必要な設定が完了したら、ビヘイビアーの作成を開始できます。

機能の説明

新しい動作パターンを作成するには、Backbone.Marionette.Behaviorを展開する必要があります。

 Behaviors.CloseButton=Backbone.Marionette.Behavior.extend({...})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このオブジェクトはどのように展開できますか？ このテンプレートが適用されるビューにアタッチされたモデルまたはコレクションのイベントをリッスンできます。

  Marionette.Behavior.extend({ modelEvents: { "change:doge": "onDogeChange" }, onDogeChange: function() { // buy more doge... }, collectionEvents: { add: "onCollectionAdd" }, onCollectionAdd: function() { } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューから動作にオプションを渡すことができます。 それらでは、たとえば要素のクラスなど、何でも転送できます。クリックすると、何かを削除する必要があります。

また、適用する種類のイベントを聞くこともできます。

ここでの関数コンテキストは、テンプレートが適用されるビューではなく、テンプレート自体であることに注意してください。 ビューにアクセスするには、this.viewを使用できます。 This。$そしてthis。$ Elも利用可能です。

 Backbone.Marionette.Behavior.extend({ onRender:function(){ //    "render". this.view;//    this.$; //  this.view.$ this.$el; //  this.view.$el this.options; //   ,   . } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプションを事前定義する必要がある場合は、そうします

 Marionette.Behavior.extend({ defaults: { 'dominion': 'invasion', 'doge': 'amaze' } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、モデルのデフォルトと同様に機能します。

ビヘイビアを作成する

先ほど言ったように、例として、削除ボタンを使用します。 新しい動作テンプレートは、パペットのストレージとして指定したオブジェクトのプロパティである必要があることに注意してください。

 Behaviors.CloseButton=Backbone.Marionette.Behavior.extend({ defaults:{ 'el':'.remove-this' }, onRender:function(){ this.$el.find(this.options.el).on('click',this.close.bind(this)); }, close: function() { this.view.model.collection.remove(this.view.model); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そこで、 CloseButtonという名前の Behaviorを作成しました 。 彼は何をしていますか？ 彼はRenderイベントをリッスンし、それが起こると、ハンドラーをハングさせて要素をクリックします。 そして、どの要素に？ 彼はオプションからそれを取ります。 デフォルトでは、これは.remove-thisクラスを持つ要素です。つまり、このようなボタンは完全に機能します

 <button class="remove-this"></button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレートを準備したら、それをビューに適用できます。

 var ListItem=Backbone.Marionette.ItemView.extend({ behaviors: { CloseButton: { //   options. //     ,  Marionette    el  '.remove-this' } } }) var Product=Backbone.Marionette.ItemView.extend({ behaviors: { CloseButton: { el:'.delete-product' } } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

製品ビューでは、クリックの要素をオーバーライドするオプションを指定してBehaviorを渡しました。



そのため、ビヘイビアを使用してコードの重複を避け、世界をより良い場所にしました。



PS誰かが興味を持っているなら、ドラッグ＆ドロップを使用してCollectionViewをソートすることについて書くことができます（jQuery Sortableを使用）。