javascript - 无法从 miithril View 启动灯箱

Question

我是 Mithril 的新手，正在努力解决这个问题。

我有一个创建 DOM 元素并声明了 onClick 方法的 View 。不幸的是，当我尝试启动诸如 magnificPopup、jqueryui dialog、fancybox 之类的灯箱时，它会调用未定义的方法，即使加载了灯箱库也是如此。

这是 Mithril 的问题吗？

这是我的代码:

        m('a.view-link', {
          onclick: function() { 

          $.colorbox();  // this fails
          alert('here is the code'); // alerts do work
          $('.view-link').css('border', '2px solid red'); // this works

          // $('.white-popup').magnificPopup({  // this claims .magnificPopup is undefined
          //   type:'inline',
          //   midClick: true
          // });

          //     $('#dialog').dialog('open'); //jqueryUI dialog claims that .dialog is undefined

          },  
         href: '#' 
        } , ' Show link in lightbox')

Answer 1

Mithril 的工作方式是创建一个虚拟 DOM(即表示模板的普通 javascript 数据结构)，然后渲染这个虚拟 DOM 以创建一个真实的 DOM 树。

当您调用 m() 时，您正在构建这个虚拟 DOM，因此此时文档中还不存在 DOM 元素。为了集成第三方库，正确的方法是通过 config 属性(参见 http://lhorie.github.io/mithril/mithril.html#accessing-the-real-dom-element )

简而言之，config 函数在渲染后被调用，它将元素作为参数，以及一些其他参数来帮助控制其生命周期。

语法如下:

m("a.view-link", {config: function(el) {
  $(el).colorbox() //initialize jquery plugin
}})