Skip to content

Instantly share code, notes, and snippets.

@d-adamkiewicz
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d-adamkiewicz/9170563 to your computer and use it in GitHub Desktop.
Save d-adamkiewicz/9170563 to your computer and use it in GitHub Desktop.
Sending data via form/js in Mojito (it works)
[
{
"settings": [ "master" ],
"appPort": "8666",
"yui": {
"config": {
"filter": "raw"
}
},
"specs": {
"myform": {
"type": "HTMLFrameMojit",
"config": {
"deploy": true,
"child": {
"type": "MyForm"
}
}
}
}
},
{
"settings": [ "environment:development" ],
"staticHandling": {
"forceUpdate": true
}
}
]
/*jslint anon:true, sloppy:true, nomen:true*/
YUI.add('myform-binder-index', function(Y, NAME) {
/**
* The myform-binder-index module.
*
* @module myform-binder-index
*/
/**
* Constructor for the MyFormBinderIndex class.
*
* @class MyFormBinderIndex
* @constructor
*/
Y.namespace('mojito.binders')[NAME] = {
/**
* Binder initialization method, invoked after all binders on the page
* have been constructed.
*/
init: function(mojitProxy) {
this.mojitProxy = mojitProxy;
},
/**
* The binder method, invoked to allow the mojit to attach DOM event
* handlers.
*
* @param node {Node} The DOM node to which this mojit is attached.
*/
bind: function(node) {
var me = this;
this.node = node;
var sendMe = function(event) {
event.preventDefault();
var value = this.node.one('#form-message').get('value');
this.mojitProxy.invoke('sendit', {
params: {
body: {
formValue: value
}
}
}, function(err, retObj){
if (!err) {
console.log('binder msg: ' + me.mojitProxy.data.get('message'));
} else {
console.log(err);
}
});
};
this.node.one('#submit-button').on('click', sendMe, this);
/**
* Example code for the bind method:
*
* node.all('dt').on('mouseenter', function(evt) {
* var dd = '#dd_' + evt.target.get('text');
* me.node.one(dd).addClass('sel');
*
* });
* node.all('dt').on('mouseleave', function(evt) {
*
* var dd = '#dd_' + evt.target.get('text');
* me.node.one(dd).removeClass('sel');
*
* });
*/
}
};
}, '0.0.1', {requires: ['event-mouseenter', 'mojito-client']});
/*jslint anon:true, sloppy:true, nomen:true*/
YUI.add('myform', function(Y, NAME) {
/**
* The myform module.
*
* @module myform
*/
/**
* Constructor for the Controller class.
*
* @class Controller
* @constructor
*/
Y.namespace('mojito.controllers')[NAME] = {
/**
* Method corresponding to the 'index' action.
*
* @param ac {Object} The ActionContext that provides access
* to the Mojito API.
*/
index: function(ac) {
console.log('index: ' + new Date().toString());
ac.models.get('model').getData(function(err, data) {
if (err) {
ac.error(err);
return;
}
ac.assets.addCss('./index.css');
ac.done({
status: 'Mojito is working.',
data: data
});
});
},
sendit: function(ac) {
console.log('sendit: ' + new Date().toString());
var body = ac.params.getFromBody('formValue');
body = "Frankie says: " + body;
console.log(body);
ac.data.set('message', body);
// crucial
ac.done();
}
};
}, '0.0.1', {requires: [
'mojito'
, 'mojito-assets-addon'
, 'mojito-models-addon'
, 'mojito-params-addon'
, 'mojito-data-addon'
]});
<div id="{{mojit_view_id}}">
<form id="my-form" method="post">
<input type="text" name="form_message" id="form-message" />
<input type="submit" id="submit-button" />
</form>
</div>
[{
"settings": [ "master" ],
"root": {
"verbs": ["get"],
"call": "myform.index",
"path": "/"
}
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment