在车把中使用 if 更改点击功能

Question

我在 JS 中设置了一个布尔变量，我想更改触发点击事件时按钮调用的函数。以下是我尝试过的两种方法。

<button type="button" {{#if variable}}on-click="funcOne"{{else}}on-click="funcTwo"{{/if}}>Click Me</button>

<button type="button" on-click="{{#if variable}}funcOne{{else}}funcTwo{{/if}}>Click me</button>

这在把手中是不可能的吗，我是否必须调用一个检查变量的函数，然后从那里调用两个函数之一？

Answer 1

第一个示例是我们有一个 open issue 的东西 - 目前，'conditional directives'（即 on-click 等指令）在 mustache 部分中不受支持。

我们可以通过两种不同的方式来完成这项工作。第一个是 代理事件:

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        variable: true
    }
});

ractive.on({
    funcOne: function () { alert( 'one' ); },
    funcTwo: function () { alert( 'two' ); }
});

<script src="//cdn.jsdelivr.net/ractive/0.7.3/ractive-legacy.min.js"></script>

<main></main>

<script id='template' type='text/ractive'>
    <label>
        <input type='checkbox' checked='{{variable}}'/> variable ({{variable}})
    </label>
    
    <button type="button" on-click="{{#if variable}}funcOne{{else}}funcTwo{{/if}}">Click me</button>
</script>

click 事件根据 variable 被转换为 funcOne 事件或 funcTwo 事件 - 我们只需要使用 [= 监听该事件19=]，就像你用 node.addEventListener.

监听 click 事件一样

另一种方法是直接调用方法。您不能有条件地选择方法（即 on-click='{{#if variable}}funcOne(){{else}}funcTwo(){{/if}}'），但您可以使用常规 JavaScript:

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        variable: true
    },
    funcOne: function () { alert( 'one' ); },
    funcTwo: function () { alert( 'two' ); },
    callMethod: function ( name ) {
        this[name]();
    }
});

<script src="//cdn.jsdelivr.net/ractive/0.7.3/ractive-legacy.min.js"></script>

<main></main>

<script id='template' type='text/ractive'>
    <label>
        <input type='checkbox' checked='{{variable}}'/> variable ({{variable}})
    </label>
    
    <button type="button" on-click="callMethod(variable?'funcOne':'funcTwo')">Click me</button>
</script>

在车把中使用 if 更改点击功能

Change function on-click using if in the handlebars

javascript

handlebars.js

ractivejs