да, это тривиально.взгляните на недавно выпущенный http://mootools.net/blog/2011/12/20/mootools-behavior/, Я думаю, что он поддерживает его.
Я использовал этот подход в моем Modal.BootStrap (просмотреть исходный код на github, ссылка там)Кроме того, когда он использует атрибуты данных для извлечения данных из ресурса AJAX, это не совсем то же самое, но, безусловно, это начало.
Я просто потратил 10 минут, чтобы сделать это, и это хорошее начало:
http://jsfiddle.net/dimitar/zYLtQ/
(function() {
var ajaxify = this.ajaxify = new Class({
Implements: [Options,Events],
options: {
mask: "form[data-ajax=true]",
props: {
ajaxLoading: "data-ajax-loading",
ajaxMode: "data-ajax-mode",
ajaxUpdate: "data-ajax-update",
ajaxSuccessEvent: "data-event-success"
}
},
initialize: function(options) {
this.setOptions(options);
this.elements = document.getElements(this.options.mask);
this.attachEvents();
},
attachEvents: function() {
this.elements.each(function(form) {
var props = {};
Object.each(this.options.props, function(value, key) {
props[key] = form.get(value) || "";
});
form.store("props", props);
form.addEvent("submit", this.handleSubmit.bind(this));
}, this);
},
handleSubmit: function(e) {
e && e.stop && e.stop();
var form = e.target, props = form.retrieve("props"), self = this;
var updateTarget = document.getElement(props.ajaxUpdate);
new Request({
url: form.get("action"),
data: form,
onRequest: function() {
if (props.ajaxLoading) {
var loading = document.getElement(props.ajaxLoading);
if (loading && updateTarget) {
updateTarget.set("html", loading.get("html"));
}
}
},
onSuccess: function() {
if (!updateTarget)
return;
if(props.ajaxMode != 'append') {
updateTarget.set("html", this.response.text);
}
else {
updateTarget.adopt(new Element("div", { html: this.response.text }));
}
if (props.ajaxSuccessEvent)
self.fireEvent(props.ajaxSuccessEvent, this.response);
}
}).send();
}
});
})();
new ajaxify({
onContactFormSuccess: function(responseObj) {
console.log(responseObj.text);
alert("we are done.");
}
});
работает с DOM:
<form action="/echo/html/" data-ajax="true" data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#update" data-event-success="contactFormSuccess" method="post">
<input name="delay" value="4" type="hidden" />
<input name="html" value="Thanks for your submission, this is the jsfiddle testing response" type="hidden" />
<input name="name" placeholder="your name" />
<button>submit</button>
</form>
<div id="update">The update will go here.</div>
<div id="loading">loading...</div>
, на котором вы сможете это сделать.в рефакторинге я бы переместил события запроса в их собственные методы и добавил еще несколько проверок и т. д., но это нормально.Я не знаю, все, что делает MVC, но одна вещь, которая отсутствует, это события проверки формы.я также добавил пользовательское событие, которое вызывается, когда это делается, чтобы ваш экземпляр ajaxifier мог сделать что-то конкретное с этой формой (см. data-event-success="contactFormSuccess")
, также он может использовать параметры запроса по умолчанию, если не указано явно, даже какой запрособъект для создания - Request, Request.HTML, Request.JSON и т. д. Также возможны такие события, как onRequest, spinner и т. д. Я думаю, что вам просто нужно пройтись по опциям, предоставляемым mvc, и собрать их, чтобы начать.
Confirm data-ajax-confirm
HttpMethod data-ajax-method
InsertionMode data-ajax-mode *
LoadingElementDuration data-ajax-loading-duration **
LoadingElementId data-ajax-loading
OnBegin data-ajax-begin
OnComplete data-ajax-complete
OnFailure data-ajax-failure
OnSuccess data-ajax-success
UpdateTargetId data-ajax-update
Url data-ajax-url