| <!DOCTYPE html> |
| <!-- |
| | Generated by Apache Maven Doxia |
| | Rendered using Apache Maven Fluido Skin 1.3.1 |
| --> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="author" content="Olivier Lamy" /> |
| <meta name="Date-Creation-yyyymmdd" content="20120119" /> |
| <meta name="Date-Revision-yyyymmdd" content="20150226" /> |
| <meta http-equiv="Content-Language" content="en" /> |
| <title>Archiva - Knockout binding</title> |
| <link rel="stylesheet" href="../css/apache-maven-fluido-1.3.1.min.css" /> |
| <link rel="stylesheet" href="../css/site.css" /> |
| <link rel="stylesheet" href="../css/print.css" media="print" /> |
| |
| |
| <script type="text/javascript" src="../js/apache-maven-fluido-1.3.1.min.js"></script> |
| |
| |
| |
| <script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script> |
| |
| |
| <script type="text/javascript">var pageTracker = _gat._getTracker("UA-140879-5"); |
| pageTracker._initData(); |
| pageTracker._trackPageview();</script> |
| |
| </head> |
| <body class="topBarEnabled"> |
| |
| |
| |
| |
| |
| <div id="topbar" class="navbar navbar-fixed-top "> |
| <div class="navbar-inner"> |
| <div class="container"><div class="nav-collapse"> |
| |
| |
| <ul class="nav"> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Introduction <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li> <a href="../index.html" title="About">About</a> |
| </li> |
| |
| <li> <a href="../download.html" title="Downloads">Downloads</a> |
| </li> |
| |
| <li> <a href="../versions.html" title="Versions">Versions</a> |
| </li> |
| |
| <li> <a href="../mail-lists.html" title="Mailing Lists">Mailing Lists</a> |
| </li> |
| |
| <li> <a href="../security.html" title="Security">Security</a> |
| </li> |
| |
| <li class="dropdown-submenu"> |
| <a href="../" title="Documentation">Documentation</a> |
| <ul class="dropdown-menu"> |
| <li> <a href="../docs/2.1.1/" title="Release 2.1.1">Release 2.1.1</a> |
| </li> |
| <li> <a href="../docs/1.3.9/" title="Preview 1.3.9">Preview 1.3.9</a> |
| </li> |
| <li> <a href="../docs/2.2.0-SNAPSHOT/" title="Dev 2.2.0-SNAPSHOT">Dev 2.2.0-SNAPSHOT</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Development <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li> <a href="../developers/building.html" title="Build Apache Archiva">Build Apache Archiva</a> |
| </li> |
| |
| <li> <a href="../get-involved.html" title="Get involved">Get involved</a> |
| </li> |
| |
| <li> <a href="../developers/how-we-do-things.html" title="How we do things">How we do things</a> |
| </li> |
| |
| <li> <a href="../redback" title="Redback">Redback</a> |
| </li> |
| |
| <li> <a href="../redback/components" title="Redback Components">Redback Components</a> |
| </li> |
| |
| <li class="dropdown-submenu"> |
| <a href="../jsui/index.html" title="Javascript application Architecture">Javascript application Architecture</a> |
| <ul class="dropdown-menu"> |
| <li> <a href="../jsui/rest.html" title="Rest service">Rest service</a> |
| </li> |
| <li> <a href="../jsui/template-loading.html" title="JS Template loading">JS Template loading</a> |
| </li> |
| <li> <a href="../jsui/i18n.html" title="i18n">i18n</a> |
| </li> |
| <li> <a href="../jsui/knockout-binding.html" title="Knockout Binding">Knockout Binding</a> |
| </li> |
| <li> <a href="../jsui/generics-js.html" title="Generic Javascipts">Generic Javascipts</a> |
| </li> |
| </ul> |
| </li> |
| |
| <li> <a href="../developers/releasing.html" title="Releasing">Releasing</a> |
| </li> |
| |
| <li> <a href="../developers/publishing-site.html" title="Site Publish">Site Publish</a> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">ASF <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li> <a href="http://www.apache.org/foundation/how-it-works.html" title="How Apache Works">How Apache Works</a> |
| </li> |
| |
| <li> <a href="http://www.apache.org/foundation/" title="Foundation">Foundation</a> |
| </li> |
| |
| <li> <a href="http://www.apache.org/foundation/sponsorship.html" title="Sponsoring Apache">Sponsoring Apache</a> |
| </li> |
| |
| <li> <a href="http://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project Documentation <b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| |
| <li class="dropdown-submenu"> |
| <a href="../project-info.html" title="Project Information">Project Information</a> |
| <ul class="dropdown-menu"> |
| <li> <a href="../integration.html" title="Continuous Integration">Continuous Integration</a> |
| </li> |
| <li> <a href="../mail-lists.html" title="Mailing Lists">Mailing Lists</a> |
| </li> |
| <li> <a href="../issue-tracking.html" title="Issue Tracking">Issue Tracking</a> |
| </li> |
| <li> <a href="../license.html" title="Project License">Project License</a> |
| </li> |
| <li> <a href="../team-list.html" title="Project Team">Project Team</a> |
| </li> |
| <li> <a href="../source-repository.html" title="Source Repository">Source Repository</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| |
| <form id="search-form" action="http://www.google.com/search" method="get" class="navbar-search pull-right" > |
| |
| <input value="http://archiva.apache.org/" name="sitesearch" type="hidden"/> |
| <input class="search-query" name="q" id="query" type="text" /> |
| </form> |
| <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=search-form"></script> |
| |
| |
| |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div id="banner"> |
| <div class="pull-left"> |
| <a href="../index.html" id="bannerLeft"> |
| <img src="../images/archiva.png" alt="Apache Archiva"/> |
| </a> |
| </div> |
| <div class="pull-right"> <a href="http://www.apache.org/" id="bannerRight"> |
| <img src="http://www.apache.org/images/asf_logo_wide.png" alt="Apache Software Foundation"/> |
| </a> |
| </div> |
| <div class="clear"><hr/></div> |
| </div> |
| |
| <div id="breadcrumbs"> |
| <ul class="breadcrumb"> |
| |
| |
| <li class=""> |
| <a href="http://www.apache.org/" class="externalLink" title="Apache"> |
| Apache</a> |
| <span class="divider">/</span> |
| </li> |
| <li class=""> |
| <a href="../" title="Archiva"> |
| Archiva</a> |
| <span class="divider">/</span> |
| </li> |
| <li class="active ">Knockout binding</li> |
| |
| |
| |
| <li id="publishDate" class="pull-right">Last Published: 26 Feb 2015</li> |
| |
| </ul> |
| </div> |
| |
| |
| |
| <div id="bodyColumn" > |
| |
| <!-- Licensed to the Apache Software Foundation (ASF) under one --><!-- or more contributor license agreements. See the NOTICE file --><!-- distributed with this work for additional information --><!-- regarding copyright ownership. The ASF licenses this file --><!-- to you under the Apache License, Version 2.0 (the --><!-- "License"); you may not use this file except in compliance --><!-- with the License. You may obtain a copy of the License at --><!-- --><!-- http://www.apache.org/licenses/LICENSE-2.0 --><!-- --><!-- Unless required by applicable law or agreed to in writing, --><!-- software distributed under the License is distributed on an --><!-- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY --><!-- KIND, either express or implied. See the License for the --><!-- specific language governing permissions and limitations --><!-- under the License. --><!-- NOTE: For help with the syntax of this file, see: --><!-- http://maven.apache.org/guides/mini/guide-apt-format.html --><div class="section"> |
| <h2>Knockout binding<a name="Knockout_binding"></a></h2> |
| <p>Explanation on the managed repositories list/edit/add screen.</p> |
| <ul> |
| <li><a href="#Knockout_binding">Knockout binding</a> |
| <ul> |
| <li><a href="#Javascript_Beans">Javascript Beans</a></li> |
| <li><a href="#View_Model">View Model</a> |
| <ul> |
| <li><a href="#First_you_must_insert_your_template_in_the_main-content_div">First you must insert your template in the #main-content div</a></li> |
| <li><a href="#You_can_now_create_your_view_model.">You can now create your view model.</a></li> |
| <li><a href="#Grid_binding">Grid binding</a></li></ul></li> |
| <li><a href="#View_definition">View definition</a> |
| <ul> |
| <li><a href="#Binding_definition">Binding definition</a></li> |
| <li><a href="#Template_content">Template content</a></li></ul></li></ul></li></ul> |
| <div class="section"> |
| <h3>Javascript Beans<a name="Javascript_Beans"></a></h3> |
| <p>First you must map the json response on a Javascript bean (a bit borying task :-) )</p> |
| <div class="source"> |
| <pre>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); |
| } |
| </pre></div> |
| <p><tt>NOTE to have access to field values you must now managedRepository.name() </tt></p></div> |
| <div class="section"> |
| <h3>View Model<a name="View_Model"></a></h3> |
| <div class="section"> |
| <h4>First you must insert your template in the #main-content div<a name="First_you_must_insert_your_template_in_the_main-content_div"></a></h4> |
| <div class="source"> |
| <pre>// it's a jquery template as we do some i18n transformations |
| $("#main-content").html($("#repositoriesMain").tmpl());</pre></div></div> |
| <div class="section"> |
| <h4>You can now create your view model.<a name="You_can_now_create_your_view_model."></a></h4> |
| <div class="source"> |
| <pre>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){ |
| ...... |
| } |
| }</pre></div></div> |
| <div class="section"> |
| <h4>Grid binding<a name="Grid_binding"></a></h4> |
| <p>The ManagedRepositoriesViewModel is used as it with a custom grid binding (knockout has a feature to create own binding so we use one called <tt>simpleGrid</tt> which will display grids.</p> |
| <p>Grid view initialisation code (some details omitted) :</p> |
| <div class="source"> |
| <pre> 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]").tooltip(); |
| } |
| }); |
| // apply the binding on the specified node |
| ko.applyBindings(managedRepositoriesViewModel,$("#main-content #managed-repositories-table").get(0)); |
| } |
| } |
| );</pre></div></div></div> |
| <div class="section"> |
| <h3>View definition<a name="View_definition"></a></h3> |
| <div class="section"> |
| <h4>Binding definition<a name="Binding_definition"></a></h4> |
| <p>We have applyed binding on the node with id "#managed-repositories-table". The binding definition is:</p> |
| <div class="source"> |
| <pre> <table class="bordered-table zebra-striped" id="managed-repositories-table" |
| data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination',data:'managedRepositories'"> |
| </table></pre></div> |
| <ul> |
| <li>simpleGrid: gridViewModel = field name for the view model (see sample above)</li> |
| <li>simpleGridTemplate:'ko_managed-repositoriesGrid' = name of the template to use (see below)</li> |
| <li>pageLinksId:'managed-repositoriesPagination' = name of the template to use for pagination.</li> |
| <li>data:'managedRepositories' = fields which contains data to pass to pass to the template</li></ul></div> |
| <div class="section"> |
| <h4>Template content<a name="Template_content"></a></h4> |
| <p>Template used for grid display (some details omitted).</p> |
| <div class="source"> |
| <pre><script id='ko_managed-repositoriesGrid' type='text/x-jquery-tmpl'> |
| <thead> |
| <tr> |
| // display read only fields defined in ko.simpleGrid.viewModel.columns (see above) |
| {{each(i, columnDefinition) columns}} |
| <th title="${ columnDefinition.title }">${ columnDefinition.headerText }</th> |
| {{/each}} |
| <th>Releases</th> |
| ..... |
| // custom columns |
| <th>${$.i18n.prop('edit')}</th> |
| <th>${$.i18n.prop('delete')}</th> |
| </tr> |
| </thead> |
| <tbody> |
| {{each(i, row) itemsOnCurrentPage()}} |
| <tr> |
| // display read only fields defined in ko.simpleGrid.viewModel.columns (see above) |
| {{each(j, columnDefinition) columns}} |
| <td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td> |
| {{/each}} |
| // custom columns which images depending on a value |
| <td> |
| {{if row.releases() == true}} |
| <img src="images/weather-clear.png" title="${$.i18n.prop('release.included')}"/> |
| {{else}} |
| <img src="images/dialog-error.png" title="${$.i18n.prop('release.notincluded')}"/> |
| {{/if}} |
| </td> |
| ..... |
| // custom columns with binding mapped to ManagedRepositoriesViewModel methods |
| <td><a href="#" data-bind="click: function(){ editManagedRepository(row) }">${$.i18n.prop('edit')}</a></td> |
| <td> |
| <a href="#" data-bind="click: function(){ removeManagedRepository(row) }"> |
| <img src="images/edit-cut.png" title="${$.i18n.prop('delete')}"/> |
| </a> |
| </td> |
| ..... |
| </tr> |
| {{/each}} |
| </tbody> |
| </pre></div></div></div></div> |
| </div> |
| </div> |
| |
| <hr/> |
| |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <p >Copyright © 2006–2015 |
| <a href="http://archiva.apache.org/">The Apache Software Foundation</a>. |
| All rights reserved. |
| |
| </p> |
| </div> |
| |
| |
| <div class="row pull-left">Apache Archiva, Archiva, Apache, the Apache feather logo, and the Apache Archiva project logos are trademarks of The Apache Software Foundation.</div> |
| |
| <div class="row pull-left"> |
| <a href="http://archiva.apache.org/privacy-policy.html">Privacy Policy</a> |
| </div> |
| |
| <p id="poweredBy" class="pull-right"> |
| <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy"> |
| <img class="builtBy" alt="Built by Maven" src="../images/logos/maven-feather.png" /> |
| </a> |
| </p> |
| |
| |
| |
| |
| |
| <div id="ohloh" class="pull-right"> |
| <script type="text/javascript" src="http://www.ohloh.net/p/6670/widgets/project_basic_stats.js"></script> |
| </div> |
| </div> |
| </footer> |
| </body> |
| </html> |
