AppGini and BackboneJS

[DevGiu]

Today I was playing a little with Backbone.

It's something interesting, but I'm not sure if has some value far than using only Views.

It allows to write something like this for a form:

Code: Select all

var AlmacenesView = Backbone.View.extend({
  events: {
	"submit form": "formHandler",
	"click #ref":	"aclick",
	"change #ref": "onChangeRef"
  },
  formHandler: function(evt) {
    evt.preventDefault();
    var nombreAlm = $j('#ref').val();
    this.$el.append('<p>hello: ' + nombreAlm + '</p>');
	$j('#ref').val('<p>hello: ' + nombreAlm + '</p>')
  },
  onChangeRef: changingRef,
  aclick: function(evt){
	  console.log(evt);
  }
});

function changingRef(){
	var nombreAlm = $j('#ref').val();
	$j('#ref').val('OMG ' + nombreAlm);
  }

$j().ready(function(){
  var myForm = new AlmacenesView({el: $j('.container')});
});

As far as I see, well, is cool because all visual logic could be in only one place, listening events, but I don't see how to get more potentional of Backbone from Collections, and so on, because Backbone "needs" a RESTful service.

Somebody did more testing?

[DevGiu]

Just for share.

Here you have a simple working sample of Backbone Views used on an Appgini DV form. I did this just because I wanted to learn a little of backbone to use it on custom pages.

Code: Select all

var EntidadView = Backbone.View.extend({
	events: {
		"change #ref": "onChangeRef",
		"click #update": "saveButton"
	},
	saveButton: function(e){
		e.preventDefault();
		if (validate_all()) $j('form').submit();
	},
	onChangeRef: function(){
		return validate_ref();
	},
});

function validate_ref(){
	var ref = parseInt($j('#ref').val());

	$j.ajax({
		url: 'hooks/ajax_codigo_lookup.php',
		data: { fichero: 'departamento', op: 'co', cont: ref },
		success: function(data){
			if (ref == data) {
				return error_campo('ref', 'Referencia Duplicada');
			} else {
				return true;
			}
		}
	});
}

function validate_all(){
	if (!validate_ref()) return false;

	return true;
}

$j().ready(function(){
  var myForm = new EntidadView({el: $j('.container')});
});

What this script does, is check if ref field has a valid value doing an ajax query onChange. On Save button, it validates again to make sure all it's ok.

Now I have to think about if it's worth going this way, or just keep working with "pure" jquery code.

Regards.

[grimblefritz]

I guess I'm not seeing it. In terms of developing with AppGini, what's the advantage of using backbone?

[DevGiu]

I guess I'm not seeing it. In terms of developing with AppGini, what's the advantage of using backbone?

This is the question.

Structured code...
and not too much AFAIK

for custom pages maybe...

[grimblefritz]

Maybe more for creating a custom "front end", with AG being the "back end"?

For example, I have a car dealer wanting an online database of vehicles for sale. AG is fine for his staff for ADDING and MANAGING vehicle records, but it's not what he wants the public to see. I suppose I could use something like backbone or angular to build that front end. Or, I can use jquery and piggyback on the AG core data functions. Other than the main page and search results, the site views one vehicle (record) at a time, so it's not difficult to code.

I looked at angular, and briefly at backbone, but I came away not wanting to invest the time to learn either. Partially due to my dislike of MV* architectures :/ I support two sites that are built with MV* packages - and they are the most difficult sites to administrate and customize.