Google Git
Sign in
apache / archiva-web-content / ea950e7ee247a1280fe39ddc33715834acf07e5a / . / jsui / knockout-binding.html
blob: fe3a4ab0517407703917b1eab7b0d29a072103e3 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Generated by Apache Maven Doxia Site Renderer 1.11.1 from src/site/apt/jsui/knockout-binding.apt
| Rendered using Apache Maven Fluido Skin 1.11.0
-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Apache Maven Doxia Site Renderer 1.11.1" />
<meta name="author" content="Olivier Lamy" />
<meta name="date" content="2012-01-19" />
<title>Archiva &#x2013; Knockout binding</title>
<link rel="stylesheet" href="../css/apache-maven-fluido-1.11.0.min.css" />
<link rel="stylesheet" href="../css/site.css" />
<link rel="stylesheet" href="../css/print.css" media="print" />
<script src="../js/apache-maven-fluido-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org";
_paq.push(['setTrackerUrl', u+'/matomo.php']);
_paq.push(['setSiteId', '10']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'/matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body class="topBarEnabled">
<a href="https://github.com/apache/archiva">
<img style="position: absolute; top: 0; right: 0; border: 0; z-index: 10000;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
alt="Fork me on GitHub">
</a>
<header id="topbar" class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a 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="../mailing-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.2.10/" title="Release 2.2.10">Release 2.2.10</a></li>
<li><a href="../docs/3.0.0-SNAPSHOT/" title="Dev 3.0.0-SNAPSHOT">Dev 3.0.0-SNAPSHOT</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a 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 class="dropdown-submenu">
<a href="../" title="Developer Reference">Developer Reference</a>
<ul class="dropdown-menu">
<li><a href="../ref/2.2.10/index.html" title="Archiva 2.2.10">Archiva 2.2.10</a></li>
<li><a href="../ref/3.0.0-SNAPSHOT/index.html" title="Archiva 3.0.0-SNAPSHOT">Archiva 3.0.0-SNAPSHOT</a></li>
<li><a href="../redback/core/3.0.0-SNAPSHOT/index.html" title="Redback 3.0.0-SNAPSHOT">Redback 3.0.0-SNAPSHOT</a></li>
</ul>
</li>
<li><a href="../redback/index.html" title="Redback">Redback</a></li>
<li><a href="../components/index.html" title="Archiva Components Project">Archiva Components Project</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 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 class="dropdown-toggle" data-toggle="dropdown">ASF <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://www.apache.org/foundation/how-it-works.html" title="How Apache Works">How Apache Works</a></li>
<li><a href="https://www.apache.org/foundation/" title="Foundation">Foundation</a></li>
<li><a href="https://www.apache.org/foundation/sponsorship.html" title="Sponsoring Apache">Sponsoring Apache</a></li>
<li><a href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></li>
</ul>
</li>
<li class="dropdown">
<a 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="../ci-management.html" title="CI Management">CI Management</a></li>
<li><a href="../mailing-lists.html" title="Mailing Lists">Mailing Lists</a></li>
<li><a href="../issue-management.html" title="Issue Management">Issue Management</a></li>
<li><a href="../licenses.html" title="Licenses">Licenses</a></li>
<li><a href="../team.html" title="Team">Team</a></li>
<li><a href="../scm.html" title="Source Code Management">Source Code Management</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="nav-collapse">
<form id="search-form" action="https://www.google.com/search" method="get" class="navbar-search pull-right" >
<input value="https://archiva.apache.org/" name="sitesearch" type="hidden"/>
<input class="search-query" name="q" id="query" type="text" />
</form>
<script>asyncJs( 'https://cse.google.com/brand?form=search-form' )</script>
</div>
</div>
</div>
</header>
<div class="container">
<header>
<div id="banner">
<div class="pull-left"><a href="../index.html" id="bannerLeft"><img src="../images/archiva.png" alt="Apache Archiva" style="" /></a></div>
<div class="pull-right"><a href="https://www.apache.org/" id="bannerRight"><img src="https://www.apache.org/images/asf_logo_wide_2016.png" alt="Apache Software Foundation" style="" /></a></div>
<div class="clear"><hr/></div>
</div>
<div id="breadcrumbs">
<ul class="breadcrumb">
<li class=""><a href="https://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: 20 Mar 2023</li>
</ul>
</div>
</header>
<main id="bodyColumn" >
<section>
<h2><a name="Knockout_binding"></a>Knockout binding</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_.23main-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><section>
<h3><a name="Javascript_Beans"></a>Javascript Beans</h3>
<p>First you must map the json response on a Javascript bean (a bit borying task :-) )</p>
<div class="source"><pre class="prettyprint">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><code>NOTE to have access to field values you must now managedRepository.name() </code></p></section><section>
<h3><a name="View_Model"></a>View Model</h3><section>
<h4><a name="First_you_must_insert_your_template_in_the_.23main-content_div"></a>First you must insert your template in the #main-content div</h4>
<div class="source"><pre class="prettyprint">// it's a jquery template as we do some i18n transformations
$(&quot;#main-content&quot;).html($(&quot;#repositoriesMain&quot;).tmpl());</pre></div></section><section>
<h4><a name="You_can_now_create_your_view_model."></a>You can now create your view model.</h4>
<div class="source"><pre class="prettyprint">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,$(&quot;#main-content #managed-repository-edit&quot;).get(0));
..
}
// method which will delete an entry
removeManagedRepository=function(managedRepository){
......
}
}</pre></div></section><section>
<h4><a name="Grid_binding"></a>Grid binding</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 <code>simpleGrid</code> which will display grids.</p>
<p>Grid view initialisation code (some details omitted) :</p>
<div class="source"><pre class="prettyprint"> var managedRepositoriesViewModel = new ManagedRepositoriesViewModel();
$.ajax(&quot;restServices/archivaServices/managedRepositoriesService/getManagedRepositories&quot;, {
type: &quot;GET&quot;,
dataType: 'json',
success: function(data) {
// data mapping json -&gt; 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: &quot;id&quot;
},
{
headerText: $.i18n.prop('name'),
rowText: &quot;name&quot;
},
{
headerText: $.i18n.prop('type'),
rowText: &quot;getTypeLabel&quot;,
// FIXME i18n
title: &quot;Repository type (default is Maven 2)&quot;
}
],
// 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(){
$(&quot;#main-content #managed-repositories-table [title]&quot;).tooltip();
}
});
// apply the binding on the specified node
ko.applyBindings(managedRepositoriesViewModel,$(&quot;#main-content #managed-repositories-table&quot;).get(0));
}
}
);</pre></div></section></section><section>
<h3><a name="View_definition"></a>View definition</h3><section>
<h4><a name="Binding_definition"></a>Binding definition</h4>
<p>We have applyed binding on the node with id &quot;#managed-repositories-table&quot;. The binding definition is:</p>
<div class="source"><pre class="prettyprint"> &lt;table class=&quot;bordered-table zebra-striped&quot; id=&quot;managed-repositories-table&quot;
data-bind=&quot;simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination',data:'managedRepositories'&quot;&gt;
&lt;/table&gt;</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></section><section>
<h4><a name="Template_content"></a>Template content</h4>
<p>Template used for grid display (some details omitted).</p>
<div class="source"><pre class="prettyprint">&lt;script id='ko_managed-repositoriesGrid' type='text/x-jquery-tmpl'&gt;
&lt;thead&gt;
&lt;tr&gt;
// display read only fields defined in ko.simpleGrid.viewModel.columns (see above)
{{each(i, columnDefinition) columns}}
&lt;th title=&quot;${ columnDefinition.title }&quot;&gt;${ columnDefinition.headerText }&lt;/th&gt;
{{/each}}
&lt;th&gt;Releases&lt;/th&gt;
.....
// custom columns
&lt;th&gt;${$.i18n.prop('edit')}&lt;/th&gt;
&lt;th&gt;${$.i18n.prop('delete')}&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
{{each(i, row) itemsOnCurrentPage()}}
&lt;tr&gt;
// display read only fields defined in ko.simpleGrid.viewModel.columns (see above)
{{each(j, columnDefinition) columns}}
&lt;td&gt;${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }&lt;/td&gt;
{{/each}}
// custom columns which images depending on a value
&lt;td&gt;
{{if row.releases() == true}}
&lt;img src=&quot;images/weather-clear.png&quot; title=&quot;${$.i18n.prop('release.included')}&quot;/&gt;
{{else}}
&lt;img src=&quot;images/dialog-error.png&quot; title=&quot;${$.i18n.prop('release.notincluded')}&quot;/&gt;
{{/if}}
&lt;/td&gt;
.....
// custom columns with binding mapped to ManagedRepositoriesViewModel methods
&lt;td&gt;&lt;a href=&quot;#&quot; data-bind=&quot;click: function(){ editManagedRepository(row) }&quot;&gt;${$.i18n.prop('edit')}&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;
&lt;a href=&quot;#&quot; data-bind=&quot;click: function(){ removeManagedRepository(row) }&quot;&gt;
&lt;img src=&quot;images/edit-cut.png&quot; title=&quot;${$.i18n.prop('delete')}&quot;/&gt;
&lt;/a&gt;
&lt;/td&gt;
.....
&lt;/tr&gt;
{{/each}}
&lt;/tbody&gt;
</pre></div></section></section></section>
</main>
</div>
<hr/>
<footer>
<div class="container">
<div class="row">
<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">
&nbsp;
</div>
<div class="row">
<p>
<a href="https://archiva.apache.org/privacy-policy.html">Privacy Policy</a>
</p>
</div>
</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>
</footer>
<script>
if(anchors) {
anchors.add();
}
</script>
</body>
</html>