Question

Objective : To block the UI until the Ajax validation call returns. With some dialog or message.

The problem: How in a Spine/MVC way, am i supposed to append and them remove the HTML content on the top of current view?

Half-baked solution: Inside Controller->
Bind the model ajaxSuccess function to remove the message HTML, and append the “loading” message on Saving the Model object.

Any ideas,?

Thanks.

Answer 1

Quick answer: you should try to avoid it altogether. It’s annoying for the user and against the core philosophy of spine.js.

http://spinejs.com/docs/introduction :

Core values:

[…]

Asynchronous interfaces – Too many JavaScript applications & frameworks don’t take full advantage of the power of client-side rendering. End-users don’t care if background requests to the server are pending, and don’t want to see loading messages and spinners. Users want unblocked interfaces, and instant interaction. To enable this, Spine stores and renders everything client-side, communicating with the server asynchronously.

I understand that sometimes blocking just can’t be avoided. In those cases I would follow this pattern:

In the controller:

1. Add blocking overlay html
2. Call model method that is asynchronous but needs blocking
3. Wait for model to emit an event that signals that the action is finished, eg. validationDone

In the model:

1. Write asynchronous method as usual
2. In both success and error handlers, emit the validationDone event