Mithril和jQuery如何互相交流？

Question

我使用Mithril作为我们的MVC框架,我想利用丰富的JQuery/Jquery UI功能.在将jQuery与Mithril结合使用时,我想了解'Do's和Do not'

我的理解是,我可以使用Mithril配置来访问真正的DOM元素并安全地绑定到各种jQuery函数.

在Mithril中使用jQuery UI函数

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

附加一个jQuery日期选择器

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

或隐藏div

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

进程导致$('blah')=== undefined的危险性是什么？

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

Answer 1

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

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

对于大量的jQuery调用,查询的元素是否存在实际上并不重要(例如$(".foo").hide(),如果.foo页面中没有,则根本不执行任何操作).

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

Answer 2

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

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

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

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