Question

我有一个普通的客户端应用程序，主要用jQuery编写。我在一个特定的页面上使用Ractive，它非常有用。但是，所有旧的jQuery事件都不再附加，可能是因为在Ractive被引入之后DOM已经被重新呈现。我尝试在Ractive渲染后设置事件，但这导致了一些奇怪的行为，丢失了DOM元素和东西。我在哪里可以设置那些旧的jQuery处理程序，还是可以的？ Ractive呈现是异步发生的，如果是，那么我应该收听一个事件吗？

我试过

$('.button').click(someHandler);  // <--- Here

getData(function(data){
    ractive = new Ractive({
        el: '.content',
        template: template,
        data: data
    });
});

和

getData(function(data){
    ractive = new Ractive({
        el: '.content',
        template: template,
        data: data
    });
    $('.button').click(someHandler); // <--- Also here
});

Answer 1

超越Rich建议使用Ractive的事件处理（这与Ractive的做事方式最为一致），您也可以使用完整的选项：

ractive = new Ractive({
    el: '.content',
    template: template,
    data: data,
    complete: function(){
        $('.button').click(...)

        // or better, use ractive's selector 
        // to limit search to the template.
        // You could use this outside of `complete`
        // as well.
        $( this.find('.button') ).click(...)
    }
});

您可以声明性地使用装饰器来了解元素的创建时间（并销毁），然后将其引用给它。在模板中：

<button decorator='initbutton'/>

然后在代码中：

ractive = new Ractive({
    el: '.content',
    template: template,
    data: data,
    decorators: {
        initbutton: function(node){
            var $button = $(node)
            $button.on('click', ...)

            return { teardown: function(){ 
                //if you need to do anything to teardown...
                $button.off('click', ...) 
            }
        }
    }
});

Answer 2

Ractive同步呈现，所以你的第二个例子应该有效（但第一个肯定不会） - 除非你所定位的.button元素在一个未呈现的部分内：

{{#someCondition}}
  <button class='button'>click me</button>
{{/someCondition}}

在这个例子中，如果someCondition是假的，那么jQuery就没有DOM元素可以作为目标。

使用Ractive执行此操作的更惯用的方法是：

<强>模板：

{{#someCondition}}
  <button on-click='doSomething'>click me</button>
{{/someCondition}}

<强>码

ractive = new Ractive({...});
ractive.on('doSomething', someHandler);

这样，您永远不必担心元素是否已被渲染。

（请记住，处理程序需要更改 - this表示ractive实例，传递给处理程序的event对象是Ractive事件而不是本机DOM事件 - 使本机事件使用event.original。）

如果.button元素应该直接渲染（即它不在虚假部分），并且jQuery 仍然在找不到它之后初始渲染，那意味着你发现了一个有趣的错误...... let us know!

何时（或如何）使用RactiveJS设置jQuery事件处理程序？

2 个答案: