It seems to me that you can fire an action in one of the following ways:
Explicitly
{
...
states: {
foo: {
on: {
BAR: {
actions: "performSomeAction",
target: "bar",
},
},
},
bar: {},
},
...
}
Implicitly with "entry"
{
...
states: {
foo: {
on: {
BAR: "bar",
}
},
bar: {
entry: "performSomeAction",
},
},
...
}
In what circumstances would you choose one over the other?
David Kourshid (creator of xstate) answered this on Spectrum:
They mean different things.
Transition actions mean "execute this action only on this transition"
Entry/exit actions mean "execute this action on any transition that enters/exits this state"
Related
I would like to use the checkSchema method instead of what I am currently doing with all the checks on the post route in an array. The problem I have is I can't find good documentation on the syntax used in the object for each key. The doc page for schema validation (https://express-validator.github.io/docs/schema-validation.html) gives one example but no links to all the syntax that defines all the attributes you can use (isInt, toInt, isUppercase, rtrim, etc.) I have searched high and low for the docs that tell you everything you can use there but no luck. Can someone point me in the right place?
express-validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.
you can find all the rules available in the link above.
here is a good example how it's used with checkSchema:
import { checkSchema, validationResult } from 'express-validator'
const schema = {
id: {
isFloat: true,
// Sanitizers can go here as well
toFloat: true,
errorMessage: "must be a valid number"
},
first_name: {
exists: {
errorMessage: "first_name is required"
},
isLength: {
errorMessage: "first_name has invalid length",
options: {
min: 1
}
}
},
middle_name: {
optional: {
options: { nullable: true, checkFalsy: true }
}
},
last_name: {
exists: {
errorMessage: "last_name is required"
},
isLength: {
errorMessage: "last_name has invalid length",
options: {
min: 1
}
}
},
date_of_birth: {
isISO8601: {
errorMessage: `date of birth is not a valid iso date`
},
isBefore: {
date: "01-01-2000",
errorMessage: `should be less than 01-01-2000`
},
isAfter: {
date: "01-01-1970",
errorMessage: `should be greater than 01-01-1970`
}
},
email: {
exists: {
errorMessage: "email is required"
},
isEmail: {
errorMessage: "email is invalid"
}
},
current_country_of_residence: {
exists: {
errorMessage: "current_country_of_residence is required",
options: {
checkNull: true,
checkFalsy: true
}
}
},
current_city_of_residence: {
exists: {
bail: true,
errorMessage: "current_city_of_residence is required"
},
isMongoId: {
errorMessage: "current_city_of_residence is has invalid id for"
}
},
email: {
isEmail: { errorMessage: 'email is not a valid email' },
isLength: { errorMessage: 'email has invalid length', options: { min: 1 } }
},
skills: {
isArray: {
errorMessage: `invalid value for skills`,
options: {
min: 3,
max: 5
}
},
isIn: {
options: ["java", "C++", "javascript"],
errorMessage: `allowed values for skills are: ${["java", "C++", "javascript"]}`
},
custom: {
options: (values) => {
const unique_values = new Set(values)
if (unique_values.size !== values.length) {
return Promise.reject()
}
return Promise.resolve()
},
errorMessage: `you can't add duplicated`
},
customSanitizer: {
options: async (value, { req }) => {
return value
}
}
}
}
const validate = () => {
return [
checkSchema(schema),
(req, res, next) => {
const errors = validationResult(req)
if (!errors.isEmpty()) {
return res.status(422).json({ errors: errors.mapped() })
}
next()
}
]
}
export default validate()
Sample Code from the VueJs components. Note that I'm trying to cover the watcher as well as the method
computed: {
...mapGetters({
resourceLinks: `tools/${storeGetters.resourceLinks}`,
}),
},
methods: {
formatData(data) {
this.setSocialLinks();
},
},
},
watch: {
resourceLinks(data) {
this.formatData(data);
},
},
expect(wrapper.vm.$options.watch.resourceLinks.call(wrapper.vm, resourceLinks1));
Take the following code:
const isWarning = () => { ... }
const setWarning = () => { ... }
const machine = Machine({
initial: "foo",
context: {
warning: null
},
states: {
foo: {
on: {
"": [
target: "bar",
action: "setWarning",
cond: "isWarning",
]
}
},
bar: {
on: {
FOO: "foo,
}
}
}
}, {
actions: {
setWarning
}
guards: {
isWarning
}
});
Is this the best way to go to "bar" and set a warning based on some quantitative data in "foo"?
Given the posted code example, I am not sure what you mean by "quantitative data in foo". Data relevant for machine's behavior can be stored in machine's context or state's meta property.
For getting into bar state and set a warning you might need something like:
const sm = Machine({
initial: 'baz',
context: { wasWarned: false },
on: {
'WARNING': {
target: 'bar',
action: 'setWarning'
}
},
states: {
baz: {},
bar: {}
}
}, {
actions: {
setWarning: assign({ warning: true })
}
})
This means: When machine gets 'WARNING' event, go into bar state AND immediately, before anything else update the context.
Actions are not immediately triggered. Instead, the State object returned from machine.transition(...) will declaratively provide an array of .actions that an interpreter can then execute.
The transition will be enabled after the guards are passed.
Other code example that might prove useful depending on what you want to achieve:
const sm = Machine({
initial: 'pending',
context: { wasWarned: null },
states: {
pending: {
on: {
'': [
{target: 'bar', cond:'wasWarned'},
{target: 'baz', cond: 'otherCond'}
]
}
},
bar: {},
baz: {}
},
guards: {
wasWarned: (ctx) => ctx.wasWarned
}
})
It seems a no-brainer to me, but could not get this to work:
My ApplicationRoute:
model: function () {
this.controllerFor('categories').set('model', this.store.find('category'));
}
CategoriesController:
App.CategoriesController = Ember.ArrayController.extend();
ArticlesRoute: (using query-params-new)
model: function(params) {
if (params.category) {
return this.store.find('article').filter(function(item) {
console.log(item.get('category.id'); // => undefined
return (item.get('category.id') === params.category); // => always false
});
} else {
return this.store.find('article');
}
}
As you can see is the above code the problem. item.get('category.id') simple does always return undefined. However the Articles do have a category defined:
REST response: (including relationship values)
{
"articles":[
{
"id":116,
"name": "Article 1"
"category":[
11
],
},
{
"id":115,
"name": "Article 2"
"category":[
6
],
},
{
"id":114,
"name": "Article 3"
"category":[
11
],
}
],
"categories":[
{
"id":6,
"name":"Category 1",
},
{
"id":11,
"name":"Category 2",
}
],
}
Edit: item.get('category') does return a <DS.ManyArray:ember747> in the console.
I found it already.
HasMany is an Array of Objects. That way we have to use findBy to search for the ID. (correct me I am wrong).
Use item.get('category').findBy('id', params.category) to filter by ID.
I am building a small demo application using Sencha touch:
I have run into an issue with the list display followed by the itemtap even firing.I had this working in a previous application but cannot find out why its not firing in the current application
I have added itemtap methods as listeners, on the view, in the controller, but none of them fire. Any ideas on what I am missing?
Thanks In Advance for your help.
PS
Main.js
Ext.define('KapselApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainview',
requires: [
'KapselApp.view.ExpApproval',
'KapselApp.view.ExpApproval.Details',
'KapselApp.view.ExpApproval.Confirm'
],
config: {
autoDestroy: false,
navigationBar: {
ui: 'sencha',
items: [
{
xtype: 'button',
id: 'editButton',
text: 'Edit',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
},
{
xtype: 'button',
id: 'saveButton',
text: 'Save',
ui: 'sencha',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}
]
},
items: [
{ xtype: 'expApprovals' }
]
}
});
ExpApproval.view
Ext.define('KapselApp.view.ExpApproval', {
extend: 'Ext.dataview.List',
xtype: 'expApprovals',
config: {
title: 'Expense Approval',
cls: 'x-ExpApprovals',
items: [{
xtype: 'list',
//id: 'expApproval',
store: expApprovals,
itemTpl: ['<div class="headshot" style="background-image:url(ExpType.Images/blue_btn_left.png);"></div>',
'From:{UserName} {WorkItem}',
'<div>Subject:{SUBJECT}</div>'
],
listeners: {
itemtap: function(view, index, item, e){
alert ('itemtap 1');
}
}
}],
itemtap: function(me, index, target, record){
alert ('itemtap');
//do other logic here
}
},
initialize: function() {
console.log ('KapselApp.view.ExpApproval:initialize: ');
}
});
Controller
Ext.define('KapselApp.controller.ExpApprovalApplication', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainview',
editButton: '#editButton',
expApprovalDetails: 'expapproval-details',
expApprovalList: 'expApprovals',
confirmExpApprovals: 'expapproval-confirm',
contacts: 'contacts',
showContact: 'contact-show',
editContact: 'contact-edit',
saveButton: '#saveButton'
},
control: {
main: {
push: 'onMainPush',
pop: 'onMainPop'
},
editButton: {
tap: 'onContactEdit'
},
expApprovalList: {
itemtap: 'onExpApprovalsSelect'
},
saveButton: {
tap: 'onContactSave'
},
editContact: {
change: 'onContactChange'
},
'expApproval list' : {itemtap: 'onExpApprovalsSelect'},
}
},
onExpApprovalsSelect: function(list, index, node, record) {
alert ('onExpApprovalsSelect');
}
}
Ok .. found the sollution to your problem. You made the same mistake as I did. you overrode the initialize method in the list view without calling in the initiallize method "this.callParent()". By adding this in my code events started firing. I am sure it will work in yours.
So your List initialize handler should look something like this:
initialize: function(){
console.log('eventsView being initialized.');
this.callParent();
},
You can still use the code bellow to check which events are being fired for debugging in similar situations.
---- Previous post ----
I am facing a similar issue. I am extending Ext.dataview.List and have a controller capture the itemtap event but the event does not seem to be firing.
I tried adding the following code to capture all the events being fired... The list seems to fire the show event and the scroll events but no other such as itemtap, etc ...
Ext.define('Override.mixin.Observable', {
override : 'Ext.mixin.Observable',
fireEvent : function(eventName, args) {
console.log('Event:', eventName, args);
this.callOverridden(arguments);
//debugger;
},
fireAction : function(eventName) {
console.log('Action:',eventName);
this.callOverridden(arguments);
}
});
Try adding this code and see if you are getting the itemtap events.
Let me know if you make any progress.