單擊是否在車把上單擊以更改功能

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

第一個例子是我們有一個未解決的問題 -目前，在胡子區域中不支持“條件指令”（即，諸如on-click指令）。

我們可以通過兩種不同的方式來完成這項工作。 首先是代理事件 ：

 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事件轉換為funcOne事件或funcTwo事件，具體取決於variable -我們只需要使用ractive.on監聽該事件，就如同您可以使用node.addEventListener監聽click事件node.addEventListener 。

另一種方法是直接調用方法。 您不能有條件地選擇方法（即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>