Question

我使用Mithril作为我们的MVC框架＆amp;我想利用丰富的JQuery / Jquery UI功能。我想了解“不要做的事情”和“不要做的事情”。将jQuery与Mithril结合使用时

据我所知，我可以使用Mithril配置访问真正的DOM元素＆amp;安全地绑定到各种jQuery函数。

但是如何在类或id上使用jQuery选择器来定位真正的DOM元素，比如

附加jQuery日期选择器

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

或隐藏div

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

进程导致$（＆＃39; blah＆＃39;）=== undefined的危险性是什么。

真的想了解这两个组件如何/应该如何相互作用。

Answer 1

简而言之，所有config函数都保证在创建DOM树之后运行。因此，在配置中，您可以调用$（bla）而不必担心元素是否已被绘制。

使用Mithril（或者就此而言，任何允许安装和卸载子模板的系统）的警告是可以通过条件逻辑从DOM中删除元素。因此，建议您将config附加到将受jQuery插件影响的元素，或者在函数中包含元素子树以使其更明显使用querySelector的配置适用于该特定范围的元素。

对于大量的jQuery调用，如果被查询的元素存在与否，实际上并不重要（例如$(".foo").hide()如果没有.foo则不会做任何事情。在页面中出现。）

需要关注的主要问题是你不想从DOM本身驱动过多的状态（这在jQuery中有些惯用）。例如，切换面板的可见性可能在jQuery中可以更快地完成，但是如果规范数据源是CSS，则从页面加载到达可见和不可见状态更难DOM中由jQuery代码控制的类，而不是单向流入视图的视图模型标志。

Answer 2

让我们首先弄清楚每个库正在做什么：Mithril是一个MVC脚手架，用于定义应用程序的结构和生命周期。秘银的视图定义了DOM，包括DOM元素将具有哪些ID，并且还将指示删除或更改这些元素的时间; jQuery UI用于定义小部件的行为，这些小部件位于更宽的视图结构中。

秘银提供config属性来公开一个功能，让您可以访问真正的DOM元素＆＃39;你在谈论。只要Mithril视图已渲染或更改，就会执行该函数：第一个参数是DOM元素;如果刚刚创建了元素，则第二个参数为false，否则为true;第三个参数是context - 它允许您在从DOM中删除元素之前定义额外的行为。

config仅在元素实际存在时执行，并为其提供引用。因此，您的jQuery UI代码应该在此函数中。这样做的好处是您永远不需要对元素的CSS选择器样式引用，因为config始终提供直接引用作为第一个参数。让我们重写您的第一个片段以这种方式工作：

＆＃13;

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!' )
    };
  }
}

＆＃13;

<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>

＆＃13;

以jQuery方式思考这个问题的最佳方式可能是config有点像DOM就绪：

$( document ).ready( function thisIsABitLikeAConfigFunction( element ){
  // Except that DOM ready only works on the document element
}  );

Mithril和jQuery如何互相交流？

2 个答案: