Mithril和jQuery如何相互影响? [英] How does Mithril and jQuery interact with each other?

问题描述

我正在使用Mithril作为我们的MVC框架&我想利用丰富的JQuery/Jquery UI功能.在将jQuery与Mithril结合使用时，我想了解应该做的"和不要做的"

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

在秘银中使用jQuery UI函数

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

附加jQuery日期选择器

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

或隐藏div

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

正在进行的m.render导致$('blah')=== undefined的危险是什么.

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

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

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

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

主要要担心的是，您不想从DOM本身(在jQuery中有些习惯用法)驱动过多状态.例如，切换面板的可见性可能可以在jQuery中更快地完成，但是如果规范的数据源是DOM中的CSS类，则很难从页面加载中同时达到可见状态和不可见状态由jQuery代码控制，而不是由视图模型标志单向流入视图.

I am using Mithril as our MVC framework & I want to leverage of rich JQuery/Jquery UI functionalities. I would like to understand the 'Do's and Don't's' when combining jQuery with Mithril

What I understand is, I can use Mithril config to access the real DOM element & bind to various jQuery functions safely.

Using jQuery UI functions with Mithril

But what about using jQuery selectors on classes or ids to locate the real DOM element, like

attaching a jQuery date picker

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

or hiding a div

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

What is the danger of inprogress m.render causing $('blah') === undefined.

Would really like to understand the how these 2 components could/should interact with each other.

解决方案

In a nutshell, all config functions are guaranteed to run after the DOM tree has been created. so from within a config, you can call $(bla) without worrying whether the element has been drawn.

The caveat with Mithril (or for that matter, any system that allows subtemplates to be mounted and unmounted) is that elements may be removed from the DOM by conditional logic. Because of this, it's recommended that you either attach config to the element that is going to be affected by the jQuery plugin, or wrap a subtree of elements in a function in order to make it more obvious that a config that uses querySelector applies to that specific range of elements.

For a large number of jQuery calls, it actually doesn't matter if the element being queried is there or not (e.g. $(".foo").hide() simply does nothing if no .foo's are present in the page).

The major thing to be concerned about is that you don't want to drive too much state from the DOM itself (which is somewhat idiomatic in jQuery). For example, toggling the visibility of a panel might be something that can be done quicker in jQuery, but it's harder to reach both visible and invisible states from, say, a page load, if the canonical data source is the CSS class in the DOM that is controlled by jQuery code, instead of a view-model flag that unidirectionally flows into the view.

这篇关于Mithril和jQuery如何相互影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！