Mithril 和 jQuery 是如何交互的？答案

【问题标题】：How does Mithril and jQuery interact with each other?Mithril 和 jQuery 是如何交互的？
【发布时间】：2014-11-26 01:36:56
【问题描述】：

我正在使用 Mithril 作为我们的 MVC 框架，并且我想利用丰富的 JQuery/Jquery UI 功能。我想了解 jQuery 与 Mithril 结合时的“做与不做”

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

Using jQuery UI functions with Mithril

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

附加一个 jQuery 日期选择器

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

或隐藏一个 div

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

inprogress m.render 导致 $('blah') === undefined 的危险是什么。

真的很想了解这两个组件可以/应该如何相互交互。

【问题讨论】：

标签： jquery mithril.js

【解决方案1】：

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

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

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

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

【讨论】：

作为秘银的新手，这里引用的 config 函数指的是可以在创建元素的同时传递给元素的属性m('div', {config: function(element, init, context){...}}, 'hello, world!')，如下巴尼所述

【解决方案2】：

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

Mithril 提供了一个 config 属性来公开一个函数，该函数使您可以访问您正在谈论的“真实 DOM 元素”。每当 Mithril 视图呈现或更改时，都会执行该函数：第一个参数是 DOM 元素；如果元素刚刚创建，则第二个参数是false，否则为true；第三个参数是context——它允许您在元素从 DOM 中删除之前定义额外的行为。

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

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

【讨论】：