From: Olivier Lamy Date: Mon, 23 Jan 2012 20:45:12 +0000 (+0000) Subject: doc on knockout binding X-Git-Tag: archiva-1.4-M3~1496 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=3b0598b97e984e9518c2a313cf403a0aa2b31d24;p=archiva.git doc on knockout binding git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1234980 13f79535-47bb-0310-9956-ffa450edef68 --- diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html index 6b11e4d4f..588fb81c0 100644 --- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html +++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html @@ -44,7 +44,13 @@ baseUrl: "js/" }); // CacheBust is for dev purpose use false in prod env ! - $LAB.setGlobalDefaults({AlwaysPreserveOrder:true,BasePath:"js/",explicit_preloading:false,CacheBust:true}); + var options = { + AlwaysPreserveOrder:true, + BasePath:"js/", + explicit_preloading:false, + CacheBust:true + }; + $LAB.setGlobalDefaults(options); $LAB .script("jquery.tmpl.js").wait() .script("archiva/utils.js").wait() @@ -62,11 +68,11 @@ .script("bootstrap-tabs.js") .script("bootstrap-modal.js") .script("bootstrap-alerts.js") - .script("bootstrap-dropdown.js").wait() - .script("bootstrap-twipsy.js").wait() + .script("bootstrap-dropdown.js") + .script("bootstrap-twipsy.js") .script("bootstrap-popover.js") - .script("knockout.simpleGrid.js").wait() - .script("knockout.mapping-latest.debug.js").wait() + .script("knockout.simpleGrid.js") + .script("knockout.mapping-latest.debug.js") .script("redback/user.js").wait() .script("redback/users.js").wait() .script("redback/redback.js").wait() @@ -74,9 +80,7 @@ .script("redback/permission.js").wait() .script("redback/resource.js").wait() .script("redback/roles.js").wait() - .script("archiva/main.js").wait(function(){ - //startArchivaApplication(); - }); + .script("archiva/main.js"); diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js index 974a10921..227aa2215 100644 --- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js +++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/i18nload.js @@ -29,12 +29,12 @@ $(function() { // -- archiva // load default //loadAndParseFile("restServices/archivaServices/commonServices/getAllI18nResources", {cache:false, mode: 'map',encoding:'utf-8'}); - //if (browserLang!='en'){ + var options = { cache:false, mode: 'map', encoding:'utf-8' }; loadAndParseFile("restServices/archivaServices/commonServices/getAllI18nResources?locale="+browserLang,options ); - //} + }); \ No newline at end of file diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt b/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt index 110d726b7..54cab62cc 100644 --- a/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt +++ b/archiva-modules/archiva-web/archiva-webapp-js/src/site/apt/knockout-binding.apt @@ -26,4 +26,196 @@ ~~ NOTE: For help with the syntax of this file, see: ~~ http://maven.apache.org/guides/mini/guide-apt-format.html -Knockout binding \ No newline at end of file +Knockout binding + + Explanation on the managed repositories list/edit/add screen. + +%{toc} + +* Javascript Beans + + First you must map the json response on a Javascript bean (a bit borying task :-) ) + ++------------------- +Java class with fields + +public class ManagedRepository + //private String id; + + //private String name; + .... + +Javascript +ManagedRepository=function(id,name,.....){ + + this.id=ko.observable(id); + + this.name=ko.observable(name); + +mapping function (to map the json result to your javascript beans) + + mapManagedRepositories=function(data){ + var mappedManagedRepositories = $.map(data.managedRepository, function(item) { + return mapManagedRepository(item); + }); + return mappedManagedRepositories; + } + mapManagedRepository=function(data){ + if (data==null){ + return null; + } + return new ManagedRepository(data.id,data.name,data.layout,data.indexDirectory,data.location,data.snapshots,data.releases, + data.blockRedeployments,data.cronExpression, + data.scanned,data.daysOlder,data.retentionCount,data.deleteReleasedSnapshots,data.stageRepoNeeded); + } + ++------------------- + + <<>> + +* View Model + +** First you must insert your template in the #main-content div + ++--------------- +// it's a jquery template as we do some i18n transformations +$("#main-content").html($("#repositoriesMain").tmpl()); ++--------------- + +** You can now create your view model. + ++--------------- +ManagedRepositoriesViewModel=function(){ + //field which will receive values + this.managedRepositories=ko.observableArray([]); + // method which will edit an entry: an other view model is created + editManagedRepository=function(managedRepository){ + var viewModel = new ManagedRepositoryViewModel(managedRepository,true,self); + ... + ko.applyBindings(viewModel,$("#main-content #managed-repository-edit").get(0)); + .. + } + // method which will delete an entry + removeManagedRepository=function(managedRepository){ + ...... + } +} ++--------------- + +** Grid binding + + The ManagedRepositoriesViewModel is used as it with a custom grid binding (knockout has a feature to create own binding + so we use one called <<>> which will display grids. + + Grid view initialisation code (some details omitted) : + ++---------------- + var managedRepositoriesViewModel = new ManagedRepositoriesViewModel(); + + $.ajax("restServices/archivaServices/managedRepositoriesService/getManagedRepositories", { + type: "GET", + dataType: 'json', + success: function(data) { + // data mapping json -> javascript + managedRepositoriesViewModel.managedRepositories(mapManagedRepositories(data)); + // we define here our grid view model for fields only displayed + managedRepositoriesViewModel.gridViewModel = new ko.simpleGrid.viewModel({ + data: managedRepositoriesViewModel.managedRepositories, + columns: [ + { + headerText: $.i18n.prop('identifier'), + rowText: "id" + }, + { + headerText: $.i18n.prop('name'), + rowText: "name" + }, + { + headerText: $.i18n.prop('type'), + rowText: "getTypeLabel", + // FIXME i18n + title: "Repository type (default is Maven 2)" + } + ], + // max items per size, the binding has a pagination feature + pageSize: 5, + // we can define here a callback function which be called on all grid change (adding/updating/removing values from the array) + gridUpdateCallBack: function(){ + $("#main-content #managed-repositories-table [title]").twipsy(); + } + }); + // apply the binding on the specified node + ko.applyBindings(managedRepositoriesViewModel,$("#main-content #managed-repositories-table").get(0)); + } + } + ); ++---------------- + +* View definition + +** Binding definition + + We have applyed binding on the node with id "#managed-repositories-table". The binding definition is: + ++---------------- + +
++---------------- + + * simpleGrid: gridViewModel = field name for the view model (see sample above) + + * simpleGridTemplate:'ko_managed-repositoriesGrid' = name of the template to use (see below) + + * pageLinksId:'managed-repositoriesPagination' = name of the template to use for pagination. + + * data:'managedRepositories' = fields which contains data to pass to pass to the template + +** Template content + + Template used for grid display (some details omitted). + ++---------------- +