Question

我是Mithril的新手并试图绕过这个问题。

我有一个创建DOM元素并声明了onClick方法的视图。不幸的是，当我尝试启动一个灯箱，例如magnificPopup，jqueryui对话框，fancybox或者你为它命名时，它调用方法undefined，即使加载了灯箱库。

这是秘银的问题吗？

这是我的代码：

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

Answer 2

可能$.colorbox();错过了＆＃39;主题＆＃39;元件？

$(this).colorbox();应该会更好。

无法从miithril View启动灯箱

2 个答案: