How to use knockout - 10 common examples

To help you get started, we’ve selected a few knockout examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github paperbits / paperbits-core / src / workshops / media / ko / mediaSelector.ts View on Github external
constructor(
        private readonly eventManager: EventManager,
        private readonly mediaService: IMediaService,
        private readonly viewManager: ViewManager,
        private readonly widgetService: IWidgetService
    ) {
        // setting up...
        this.mediaItems = ko.observableArray();
        this.selectedMedia = ko.observable();
        this.searchPattern = ko.observable();
        this.working = ko.observable(true);
    }
github FredrikNoren / ungit / components / graph / selectable.js View on Github external
constructor(graph) {
    this.selected = ko.computed({
      read() {
        return graph.currentActionContext() == this;
      },
      write(val) {
        // val is this if we're called from a click ko binding
        if (val === this || val === true) {
          graph.currentActionContext(this);
        } else if (graph.currentActionContext() == this) {
          graph.currentActionContext(null);
        }
      },
      owner: this
    });
  }
}
github paperbits / paperbits-core / src / workshops / block / ko / addBlockDialog.ts View on Github external
constructor(
        private readonly blockService: IBlockService,
        private readonly sectionModelBinder: SectionModelBinder,
        private readonly viewManager: IViewManager
    ) {
        this.addBlock = this.addBlock.bind(this);

        this.working = ko.observable(false);
        this.name = ko.observable();
        this.name.extend({ required: true });
    }
github Azure / api-management-developer-portal / src / components / users / user-details / ko / runtime / user-details.ts View on Github external
constructor(
        private readonly usersService: UsersService, 
        private readonly tenantService: TenantService,
        private readonly backendService: BackendService,
        private readonly router: Router) {
        this.user = ko.observable();
        this.firstName = ko.observable();
        this.lastName = ko.observable();
        this.email = ko.observable();
        this.password = ko.observable();
        this.confirmPassword = ko.observable();
        this.isEdit = ko.observable(false);
        this.isBasicAccount = ko.observable(false);
        this.working = ko.observable(false);
        this.registrationDate = ko.computed(() => this.getRegistrationDate());
    }
github Azure / api-management-developer-portal / src / components / users / user-signin / ko / runtime / user-signin.ts View on Github external
constructor(private readonly usersService: UsersService) {
        this.username = ko.observable("");
        this.password = ko.observable("");
        this.errorMessages = ko.observableArray([]);
        this.hasErrors = ko.observable(false);
        this.working = ko.observable(false);
        this.canSubmit = ko.pureComputed(() => {
            return !!this.username() && !!this.password() && !this.working();
        });
    }
github Azure / api-management-developer-portal / src / components / apis / details-of-api / ko / runtime / api-details.ts View on Github external
constructor(
        private readonly apiService: ApiService,
        private readonly routeHelper: RouteHelper,
        private readonly router: Router,
    ) {
        this.changeLogPageUrl = ko.observable();
        this.api = ko.observable();
        this.selectedApiName = ko.observable();
        this.versionApis = ko.observableArray([]);
        this.working = ko.observable(false);
        this.currentApiVersion = ko.observable();
        this.downloadSelected = ko.observable("");
        this.loadApi = this.loadApi.bind(this);
    }
github Azure / api-management-developer-portal / src / components / apis / list-of-apis / ko / runtime / api-list.ts View on Github external
constructor(
        private readonly apiService: ApiService,
        private readonly routeHelper: RouteHelper
    ) {
        this.detailsPageUrl = ko.observable();
        this.allowSelection = ko.observable(false);
        this.apis = ko.observableArray([]);
        this.working = ko.observable();
        this.pattern = ko.observable();
        this.page = ko.observable(1);
        this.hasPrevPage = ko.observable();
        this.hasNextPage = ko.observable();
        this.hasPager = ko.computed(() => this.hasPrevPage() || this.hasNextPage());
        this.apiGroups = ko.observableArray();
        this.groupByTag = ko.observable(false);
    }
github surveyjs / survey-library / src / knockout / kosurvey.ts View on Github external
private applyBinding() {
    if (!this.renderedElement) return;
    this.updateKoCurrentPage();
    ko.cleanNode(this.renderedElement);
    if (!this.isFirstRender) {
      this.updateCurrentPageQuestions();
    }
    this.isFirstRender = false;
    ko.applyBindings(this, this.renderedElement);
  }
  private updateKoCurrentPage() {
github readthedocs / readthedocs.org / readthedocs / builds / static-src / builds / js / detail.js View on Github external
BuildDetailView.init = function (instance, domobj) {
    var view = new BuildDetailView(instance);
    var domobj = domobj || $('#build-detail')[0];
    ko.applyBindings(view, domobj);
    return view;
};
github readthedocs / readthedocs.org / readthedocs / gold / static-src / gold / js / gold.js View on Github external
GoldView.init = function (config, obj) {
    var view = new GoldView(config);
    var obj = obj || $('#payment-form')[0];
    ko.applyBindings(view, obj);
    return view;
}

knockout

Knockout makes it easier to create rich, responsive UIs with JavaScript

MIT
Latest version published 4 years ago

Package Health Score

59 / 100
Full package analysis