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用于 - 当前，＆＃39;条件指令＆＃39; （即胡须部分内部不支持on-click等指令。

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

＆＃13;

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        variable: true
    }
});

ractive.on({
    funcOne: function () { alert( 'one' ); },
    funcTwo: function () { alert( 'two' ); }
});

＆＃13;

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

＆＃13;

click事件被转换为funcOne事件或funcTwo事件，具体取决于variable - 我们只需要使用{{1}监听该事件与您使用ractive.on监听click事件的情况相同。

另一种方法是直接调用方法。您无法有条件地选择方法（例如node.addEventListener），但您可以使用常规JavaScript来执行此操作：

＆＃13;

on-click='{{#if variable}}funcOne(){{else}}funcTwo(){{/if}}'

＆＃13;

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

＆＃13;

使用if在把手中单击更改功能

1 个答案: