Mariyadasu Nukathoti: Knockout sample screen with syntax

1. HTML
==================================

@using GDD.Enum
@{
ViewBag.Title = "Global Data Dictionary";
}

<div class="shortcut-area container-fluid">
<div data-bind="template: { name: 'shortcut-renderer', foreach: $data.Pages }"></div>
</div>

@section scripts {
@Scripts.Render("~/bundles/home")

<script id="shortcut-renderer" type="text/html">

<div class="shortcut">
<div class="shortcut-icon-wrapper">
<a class="shortcut-icon btn btn-link btn-block" data-bind="attr: { href: Url() }">
<i class="fa-3x fa" data-bind="css: Icon"></i>
</a>
</div>
<div class="shortcut-name-wrapper">
<a class="shortcut-name btn btn-link btn-block" data-bind="attr: { href: Url() }, text: Name"></a>
</div>
</div>

</script>
<script>
GDD.Site.OnPreinitialize(function (site) {
site.ContentModel(new GDD.Home.Managers.IndexManager(@Html.Raw(Json.Encode(ViewBag.CurrentAccessLevel <= (int)UserAccessLevel.EntityAdmin))));
});

GDD.Site.OnPostinitialize(function () {
site.ContentModel().GetRootApplications();
});
</script>
}

2. script file

=============================================

module GDD.Home.Managers {

"use strict";

export class IndexManager {

constructor(isAdmin: boolean = false) {

this.IsAdmin(isAdmin);

}

IsAdmin = ko.observable<boolean>(false);

Pages = ko.observableArray<Models.Page>([]);

// Remote call to load all root applications

GetRootApplications: () => void = () => {

this.Pages.push(new Models.Page({ Name: "Entities", Icon: "fa-line-chart", Url: "/Entities", AdminOnly: false }));

this.Pages.push(new Models.Page({ Name: "Entities (Bulk)", Icon: "fa-stack-overflow", Url: "/Bulk/Entities", AdminOnly: true }));

this.Pages.push(new Models.Page({ Name: "Pertinence Rules", Icon: "fa-flask", Url: "/Pertinence", AdminOnly: false }));

this.Pages.push(new Models.Page({ Name: "Display Groups", Icon: "fa-tv", Url: "/DisplayGroups", AdminOnly: false }));

this.Pages.push(new Models.Page({ Name: "Possible Value Groups", Icon: "fa-list-ul", Url: "/PossibleValueGroups", AdminOnly: false }));

this.Pages.push(new Models.Page({ Name: "API", Icon: "fa-cogs", Url: "/Help", AdminOnly: false }));

}

3. script file

===============================

var site: GDD.Site;

module GDD {

"use strict";

export class Site {

// dom

$content = $("#content");

$ding = $("#dingSound");

$exceptionModal = $("#exceptionModal");

$cancelConfirmModal = $("#cancel-confirm");

$cwsTimeoutModal = $("#cwsTimeoutModal");

$groupNameHelpTemplate = $("#group-name-help-template");

$loadModal = $("#loadModal");

$navMenu = <MMenu>$("#nav-menu");

$dataTypeHelpTemplate = $("#data-type-help-template");

$dataTypePossibleValGroupHelp = $("#data-type-possiblegroup-help-template");

$disabledDataTypePossibleValGroupHelp = $("#disabled-data-type-possiblegroup-help-template");

$displayGroupHelpTemplate = $("#display-group-help-template");

$displayGroupPluginHelpTemplate = $("#display-group-plugin-help-template");

$displayGroupDetailHelpTemplate = $("#display-group-detail-help-template");

$displayGroupDragHelpTemplate = $("#display-group-drag-help-template");

$displayGroupDisplayNameHelpTemplate = $("#display-group-display-name-help-template");

$possibleValueGroupHelpTemplate = $("#possible-value-group-help-template");

$possibleValueGroupTabHelpTemplate = $("#possible-value-group-tab-help-template");

$pertinenceHelpTemplate = $("#pertinence-help-template");

$searchHelpTemplate = $("#search-help-template");

$searchPrefPageSizeHelpTemplate = $("#search-pref-page-size-help-template");

$unitHelpTemplate = $("#unit-help-template");

$validationPanel = $("#validation-panel");

$possibleValueHelpTemplate = $("#possible-value-template");

$entityNameHelpTemplate = $("#entity-name-template");

$entityNamePrefixHelpTemplate = $("#entity-name-prefix-template");

$entityNameSuffixHelpTemplate = $("#entity-name-suffix-template");

$entityNameReplaceHelpTemplate = $("#entity-name-replace-template");

$entityNameReplaceWithHelpTemplate = $("#entity-name-replace-with-template");

$fileExtensionsHelpTemplate = $("#file-extensions-help-template");

$personPanel = $("#person-panel");

$possibleValueFloatHelpTemplate = $("#possible-value-float-help-template");

$possibleValueIntegerHelpTemplate = $("#possible-value-integer-help-template");

$quantityHelpTemplate = $("#quantity-help-template");

$deleteHelpTemplate = $("#delete-help-template");

$unDeleteHelpTemplate = $("#unDelete-help-template");

$showMoreInfo = $("#more-info-modal");

$precisionHelpTemplate = $("#precision-help-template");

$defaultValueSymbolicHelpTemplate = $("#default-value-symbolic-help-template");

// custom view model

ContentModel = ko.observable<any>({});

// controls

PersonSearchControl = new Controls.PersonSearch();

// tooltips

DataTypeTooltip = ko.pureComputed<any>({

read: (): any => {

var content = this.$dataTypeHelpTemplate.html();