HComponentz!

Cosa sono? sono classi che estendono Model, Collection e View di Backbonejs aggiungendo funzionalità utili a velocizzare lo sviluppo di interfacce per applicazioni web, e dei componenti per la paginazione, ordinamento e filtraggio, che si integrano con le classi base di Hcomponentz.

Dipendenze

Per poter utilizzare queste librerie è necessari includere nella propria applicazione

• backbone_es6: ^1.0.1
• jquery: ^3.2.1 -- globale
• underscore: ^1.8.3 -- globale
• handlebars :^4.0.11

npm -i backbone_es6 npm -i jquery npm -i underscore
npm -i handlebars

HView

Estensione della Backbone.View. Utilizzaimo Handlebars come motore di template. esempio:

file template.hbs

<h3>View: {{model.name}}</h3>

<table  class="table ">    
    <tbody>    
	    <tr>    
		    <td  class="font-weight-bold">Nome</td>    
		    <td>{{model.name}}</td>    
	    </tr>    
	    <tr>    
		    <td  class="font-weight-bold">Cognome</td>    
		    <td>{{model.surname}}</td>    
	    </tr>    
	    <tr>    
		    <td  class="font-weight-bold">Email</td>    
		    <td>{{model.email}}</td>    
	    </tr>    
    </tbody>    
</table>
<div  class="text-right">    
    <button  type="button"  class="btn btn-outline-danger" chiudi>chiudi</button>    
</div>

file hview.js

import { HView } from  'hcomponentz';    
import  template  from  './template.hbs';    
  

export  class  MyView  extends  HView {

    get  events() {    
	    return { "click [chiudi]":  "remove" };    
    }    	      
    
    get  template() {    
	    return  template;
	 }

}

file app.js

import { HModel} from  "hcomponentz";
import { MyView } from  "./hview";

let  model  =  new HModel({name:"Stefano",surname:"Baldocchi", email:"[e-mail]"});

let  myView  =  new  MyView({model:model});

$("#js_main_view").append(myView.render().el);

JSDoc

Table of Contents

• HUtils
  • getFilters
    • Parameters
  • setFilters
    • Parameters
  • getObjectFromSessionStorage
    • Parameters
  • setObjectInSessionStorage
    • Parameters
• HView
  • Parameters
  • render
  • _ensureContext
    • Parameters
• HFormView
  • Parameters
  • events
  • submit
    • Parameters
  • onUpdated
  • onSaved
  • onError
  • forceFetch
  • initialize
  • invalid
  • clearInvalid
  • populateModel
    • Parameters

HUtils

HUtils fornisce metodi statici di utilità.

getFilters

viene utilizzato nella HPageableCollection per recuperare i filtri salvati

Parameters

• persistenceId persistenceId id che identifica la collection

Returns filters array di filtri persistiti.

setFilters

Salva i filtri nel sessionStorage con chiave la persistenceId della HPageableCollection

Parameters

• persistenceId persistenceId id che identifica la collection, viene utilizzato nella HPageableCollection per recuperare i filtri salvati
• filters
• array filters di filtri da persistere.

getObjectFromSessionStorage

Restituisce un oggetto dal SessionStorage data la chiave

Parameters

• key key chiave del sessionstorage

Returns Object array di filtri persistiti.

setObjectInSessionStorage

Inserisce un oggetto nel SessionStorage data la chiave

Parameters

• key key chiave del sessionstorage
• val

HView

Extends View

Estensione della view di Backbone

Parameters

• options

render

view - DEVE ritornare la view stessa.

Returns HView

_ensureContext

prepara il model e la collection per la visualizzazione nel template {{model.prop}} anzichè {{model.attributes.prop}}

Parameters

• context Backbone.View

HFormView

Extends HView

Estensione della view di Backbone

Parameters

• options

events

Evento di submit del form html

submit

Metodo che intercetta la sottomissione della form

Parameters

• e Event

onUpdated

Metodo invocato dopo la modifica del model.

onSaved

Metodo invocato dopo la creazione del model.

onError

Metodo invocato dopo un errore durante la modifica del model.

forceFetch

Da sovrascrivere per forzare la chiamata al server prima della visualizzazione della form in caso di modifica

Returns boolean

initialize

Sta in ascolto sull'evento invalid del model e esegue il metodo invalid() eseque la chiamata al server per recuperare i dati del model in caso la proprieta forceFetch sia true

invalid

Da sovrascrivere per personalizzare la validazione

clearInvalid

Da sovrascrivere per personalizzare la validazione

populateModel

Parameters

• form HTMLFormElement
• model Backbone.Model =this.model il model della view (optional, default this.model)