Как передать функцию активным компонентам?

Question

Я хочу передать функцию в шаблон Ractive и вызывать ее, когда в компоненте есть какое-то действие. Каков наилучший способ сделать это?

Answer 1

Существует несколько способов сделать это.

Вы можете предоставить метод

const Component = Ractive.extend({ 
 
    template: ` 
 
    <button type="button" on-click="@this.myMethod()">Click Me</button> 
 
    `, 
 
    myMethod: function() { 
 
    console.log('Hello World!'); 
 
    } 
 
}); 
 

 
new Component({ 
 
    el: 'body' 
 
});

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

Или прикрепить прослушиватель событий в одном из событий жизненного цикла

const Component = Ractive.extend({ 
 
    template: ` 
 
    <button type="button" on-click="someevent">Click Me</button> 
 
    `, 
 
    oninit: function() { 
 
    this.on('someevent', function() { 
 
     console.log('Hello World!'); 
 
    }); 
 
    } 
 
}); 
 

 
new Component({ 
 
    el: 'body' 
 
});

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

теля Тяговый также поддерживает функцию передачи данных (буквально функцию внутри ваших данных)

const Component = Ractive.extend({ 
 
    template: ` 
 
    <button type="button" on-click="this.myDataFunction()">Click Me</button> 
 
    `, 
 
    data: { 
 
    myDataFunction: function(){ 
 
     console.log('Hello World!'); 
 
    } 
 
    } 
 
}); 
 

 
new Component({ 
 
    el: 'body' 
 
});

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

Если у вас есть функция на родительском компоненте, который вы хотите наречены компонента события ребенка, просто сгореть мероприятие дочерний компонент. Вы можете сделать это, назначив имя события или вручную, используя ractive.fire (полезно, если вы хотите передать аргументы). Затем вы назначаете родительскому шаблону обработчик или метод события.

const Child = Ractive.extend({ 
 
    template: ` 
 
    <button type="button" on-click="customclick" on-mouseover="@this.fire('custommouseover', 'Hello', 'World')">Click Me</button> 
 
    ` 
 
}); 
 

 
const Parent = Ractive.extend({ 
 
    components: { Child }, 
 
    template: ` 
 
    <Child on-customclick="@this.myMethod()" on-custommouseover="mouseovered" /> 
 
    `, 
 
    myMethod: function(){ 
 
    console.log('clicked'); 
 
    }, 
 
    oninit: function() { 
 
    this.on('mouseovered', function(foo, bar) { 
 
     console.log('mouseovered', foo, bar); 
 
    }); 
 
    } 
 
}); 
 

 
new Parent({ 
 
    el: 'body' 
 
});

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

Вы можете смешивать и сочетать использование события, вызовы методов и функций данных, как вам нравится. Вы можете вызвать кнопку вызова метода, который в свою очередь вызывает ractive.fire, имеет обработчик события, который вызывает ractive.fire, назначает имя события, которое получает родитель, вызывает ractive.fire непосредственно из шаблона и т. Д. Вы даже можете передать родительскую функцию как данные, и называть его как функцию данных для ребенка. Выберите все, что работает для вас.