Methods
Helpers are can define instance methods which can then be called at any time during the lifecycle of the app.
Instance methods
Update fields
Use the set
instance method to update fields and values at runtime. Given the following example:
var profile;
Fliplet.Helper({
name: 'profile',
data: {
firstName: 'John'
},
render: {
ready: function () {
profile = this;
}
}
});
See how the firstName
property can be updated at anytime using a static value or using the result of a promise returned by a function:
profile.set('firstName', 'Nick');
profile.set('firstName', function () {
return Promise.resolve('Tony');
})
Find all nested helpers
Use the find
method to retrieve a list of all helpers nested in the current helper.
// Get a list of nested helpers by name
var foundHelpers = profile.find({ name: 'foo' });
// You can also use the shorthand
var foundHelpers = profile.find('foo');
// You can also provide a predicate function
var foundHelpers = profile.find(function (instance) {
return instance.name === 'foo' || instance.name === 'bar';
});
Find a nested helper
Use the findOne
method to retrieve a helper nested in the current helper.
// Get a nested helper by name
var helperInstance = profile.findOne({ name: 'foo' });
// You can also use the shorthand
var helperInstance = profile.findOne('foo');
// You can also provide a predicate function
var helperInstance = profile.findOne(function (instance) {
return instance.name === 'foo' || instance.name === 'bar';
});
Find all children helpers
Use the children
method to retrieve a list of all direct child helpers nested in the current helper.
// Get a list of direct child helpers by name
var foundHelpers = profile.children({ name: 'foo' });
// You can also use the shorthand
var foundHelpers = profile.children('foo');
// You can also provide a predicate function
var foundHelpers = profile.children(function (instance) {
return instance.name === 'foo' || instance.name === 'bar';
});
Define new instance methods
Instance methods can be defined via the methods
property as shown in the example below:
Fliplet.Helper({
name: 'welcome',
render: {
methods: {
greet: function () {
console.log('Hello');
}
},
ready: function () {
// Greet once a button inside this helper is clickd
this.$el.find('button').click(this.greet);
}
}
});
You can also keep a reference to a helper instance and call its methods any time:
var welcome;
Fliplet.Helper({
name: 'welcome',
render: {
methods: {
greet: function () {
console.log('Hello');
}
},
ready: function () {
welcome = this;
}
}
});
welcome.greet();
Further reading
Fields
Learn more about defining fields in your helpers.