Mithril和jQuery是如何相互作用的？

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

我的理解是，我可以使用mithrilconfig访问真正的DOM元素&安全地绑定到各种jQuery函数

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

附加jQuery日期选择器

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

或者藏一个div

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

inprogress m.render导致$（'blah'）==未定义的危险是什么

---

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

让我们首先了解每个库都在做什么：Mithril是一个MVC框架，用于定义应用程序的结构和生命周期。Mithril的视图定义了DOM，包括DOM元素将具有的ID，并且还将指示何时删除或更改这些元素；jQueryUI用于定义位于更宽视图结构中的小部件的行为

Mithril提供了一个

config

属性来公开一个函数，该函数允许您访问您所说的“真正的DOM元素”。无论何时呈现或更改Mithril视图，都会执行该函数：第一个参数是DOM元素；如果元素刚刚创建，则第二个参数为

false

，否则为

true

；第三个参数是

上下文

——它允许您在从DOM中删除元素之前定义额外的行为

config

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

m.module（document.body{
控制器：函数（）{
},
//因为视图是由Mithril代码生成的
//（这可能会更改类或ID，或完全删除元素。。。
视图：函数（）{
返回m（'.this'，
m（'.is'，
m（“.all”，
m（'.rendered'，
m（“.by”，
m（“.mithril”，
//…jQuery没有引用这些内容。
m（'input[placeholder=由Mithril呈现！]'{
//所有jQuery都在外部函数中进行，如下所示：
配置：configDatePicker
} ) ) ) ) ) ) );
}
} )
//……同时。。。
函数configDatePicker（元素、初始化、上下文）{
//我们不想一直添加类，只想在第一次创建元素时添加
if（！init）{
//这里我们直接引用元素，并将其传递给jQuery
$（元素）.datepicker（）.on（'单击'，函数（））{
$（element）.val（'behavior by jQuery！'）
} );
//当元素被破坏时，我们还可以绑定一个事件来触发行为
context.onunload=函数（）{
//…但这永远不会发生，因为我们的代码不会这样做；）
警报（“.mydatepicker将被销毁！”）
};
}
}

---

简而言之，所有

config

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

Mithril（或任何允许安装和卸载子模板的系统）的警告是，可以通过条件逻辑从DOM中删除元素。因此，建议您将

config

附加到将受jQuery插件影响的元素，或者将元素子树包装到函数中，以使使用querySelector的配置更明显地应用于该特定范围的元素

对于大量jQuery调用，实际上被查询的元素是否存在并不重要（例如，

$（“.foo”）.hide（）

如果页面中不存在

.foo

，则它什么也不做）

---

需要关注的主要问题是，您不希望从DOM本身驱动太多的状态（这在jQuery中有点惯用）。例如，在jQuery中切换面板的可见性可能会更快，但如果规范化数据源是由jQuery代码控制的DOM中的CSS类，那么从页面加载中同时达到可见和不可见状态就更难了，与单向流入视图的视图模型标志不同。

作为mithril的新手，这里引用的

config

函数指的是在创建元素时可以传递给元素的属性

m（'div'，{config:function（element，init，context）{…}，'hello，world！'

如barney所述