18

私は Mithril を MVC フレームワークとして使用しており、豊富な JQuery/Jquery UI 機能を活用したいと考えています。jQueryとMithrilを組み合わせる際の「すべきこと」と「すべきでないこと」を理解したい

私が理解しているのは、Mithril config を使用して実際の DOM 要素にアクセスし、さまざまな jQuery 関数に安全にバインドできるということです。

Mithril で jQuery UI 関数を使用する

しかし、クラスまたは ID で jQuery セレクターを使用して、実際の DOM 要素を見つけるのはどうでしょうか。

jQuery 日付ピッカーのアタッチ

  beforeShow: function(input, inst) {
   $('#ui-datepicker-div').addClass("mydatepicker");
  },

またはdivを隠す 

 $("#mydiv").hide();

進行中の m.render が $('blah') === undefined を引き起こす危険性は何ですか?

これらの 2 つのコンポーネントがどのように相互に作用するか、または作用するかを本当に理解したいと思います。

4

2 に答える 2

20

config簡単に言えば、 DOM ツリーが作成された後、すべての関数が実行されることが保証されます。そのため、構成内から、要素が描画されているかどうかを気にせずに $(bla) を呼び出すことができます。

Mithril (さらに言えば、サブテンプレートのマウントとアンマウントを可能にするシステム) に関する警告は、要素が条件付きロジックによって DOM から削除される可能性があることです。このため、jQuery プラグインの影響を受ける要素にアタッチconfigするか、要素のサブツリーを関数でラップして、querySelector を使用する構成が特定の要素に適用されることをより明確にすることをお勧めします。要素の範囲。

多数の jQuery 呼び出しの場合、クエリ対象の要素が存在するかどうかは実際には問題になりません (たとえば、ページに が存在$(".foo").hide()しない場合は何もしません.foo)。

懸念すべき主な点は、DOM 自体からあまり多くの状態を駆動したくないということです (これは jQuery ではやや慣用的です)。たとえば、パネルの可視性の切り替えは、jQuery でより迅速に実行できる可能性がありますが、正規のデータ ソースが DOM の CSS クラスである場合、たとえばページの読み込みから可視状態と非可視状態の両方に到達するのは困難です。これは、ビューに一方向に流れるビュー モデル フラグではなく、jQuery コードによって制御されます。

于 2014-11-26T15:44:08.937 に答える
19

まず、各ライブラリが何をしているのかを理解しましょう。Mithril は、アプリケーションの構造とライフサイクルを定義するために使用される MVC の足場です。Mithril のビューは、DOM 要素が持つ ID を含む DOM を定義し、これらの要素がいつ削除または変更されるかを指示します。jQuery UI は、より広いビュー構造内にあるウィジェットの動作を定義するために使用されます。

Mithril は、configあなたが話している「実際の DOM 要素」へのアクセスを可能にする関数を公開するための属性を提供します。この関数は、Mithril ビューがレンダリングまたは変更されるたびに実行されます。最初の引数は DOM 要素です。2 番目の引数はfalse、要素が作成されたばかりか、それ以外のtrue場合です。3 番目の引数はcontext、要素が DOM から削除される前に追加の動作を定義できます。

config要素が実際に存在する場合にのみ実行され、その参照を提供します。このため、jQuery UI コードはこの関数内にある必要があります。これの利点は、config が最初の引数として常に直接参照を提供するため、要素への CSS セレクタ スタイル参照が必要ないことです。最初のスニペットを次のように書き直してみましょう。

m.module( document.body, {
  controller : function(){
  },
  // Because the view is generated by Mithril code 
  // (which could change the classes or IDs, or remove elements entirely...
  view       : function(){
    return m( '.this', 
             m( '.is', 
               m( '.all', 
                 m( '.rendered', 
                   m( '.by', 
                     m( '.mithril', 
                       // ...None of this is referenced by jQuery. 
                       m( 'input[placeholder=Rendering by Mithril!]', {
                         // All jQuery happens in external functions, attached like this:
                         config : configDatePicker
                       } ) ) ) ) ) ) );
  }
} )

// ...Meanwhile...

function configDatePicker( element, init, context ){
  // We don't want to add the class all the time, only the first time the element is created
  if( !init ){
    // Here we reference the element directly, and pass it to jQuery
    $( element ).datepicker().on( 'click', function(){
      $( element ).val( 'Behaviour by jQuery!' )
    } );
    
    // We can also bind an event to trigger behaviour when the element is destroyed
    context.onunload = function(){
      // …But this will never happen because our code doesn't do that ;)
      alert( '.mydatepicker is going to be destroyed!' )
    };
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.24/mithril.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

おそらく、これを jQuery の方法で考える最良の方法はconfig、DOM の準備ができているようなものです。

$( document ).ready( function thisIsABitLikeAConfigFunction( element ){
  // Except that DOM ready only works on the document element
}  );
于 2014-11-26T14:27:26.583 に答える