TypeScript knockout applyBindings Examples

Example #1

File: BookingLeftCtrl.ts Project: saeed-ahmed/CCTracking

 UIBinding(model: any) {       
     this.bookingLeftViewModel.bbModel = model;
     this.bookingLeftViewModel.model = kb.viewModel(model);
     ko.cleanNode($(this.bookingLeftView.el)[0]);
     ko.applyBindings(this.bookingLeftViewModel, this.bookingLeftView.el);
 }

Example #2

File: bindings1.ts Project: xiangnanyue/mygit2

}

class People{
    firstName: string;
    lastName: string

    constructor(first: string, last: string){
        this.firstName = first;
        this.lastName = last;
    }
}

class Product{
    name: string
    userRate: KnockoutObservable<string>
    
    constructor(name:string){
        this.name = name;
        this.userRate=ko.observable("");
    }
}

var vm = new ViewModel();
ko.applyBindings(vm);

vm.detail("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
//vm.add()

ko.components.register("like-or-dislike", {require: 'components/component-like-widget'});

Example #3

File: index.ts Project: Metal10k/knockout-react-sample

import * as reactDOM from "react-dom";

import {SomeComponentList, TestComponentFullSample} from "./ReactComponents/ComponentA";

console.log("I am working");

ko.components.register("ko-component", {
    viewModel: KoComponent,
    template: KoComponent.template
});
ko.components.register("ko-list", {
    viewModel: KoList,
    template: KoList.template
});
ko.components.register("ko-template", {
    viewModel: KoTemplate,
    template: KoTemplate.template
});

ko.components.register("ko-react-bridge", {
    viewModel: KoReactBridge,
    template: KoReactBridge.template
});

//let domElement = react.createElement("div");
//reactDOM.render(react.createElement(SomeComponentList), document.getElementById('react'));
//reactDOM.render(react.createElement(SomeKoComponentList), document.getElementById('react'));

//reactDOM.render(react.createElement(TestComponentFullSample), document.getElementById('react'));
ko.applyBindings({}, document.getElementsByClassName("knockout")[0]);

Example #4

File: boot.ts Project: An0564/JavaScriptServices

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import './css/site.css';
import * as ko from 'knockout';
import { createHistory } from 'history';
import './webpack-component-loader';

// Load and register the <app-root> component
ko.components.register('app-root', require('./components/app-root/app-root').default);

// Tell Knockout to start up an instance of your application
ko.applyBindings({ history: createHistory() });

// Basic hot reloading support. Automatically reloads and restarts the Knockout app each time
// you modify source files. This will not preserve any application state other than the URL.
declare var module: any;
if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => ko.cleanNode(document.body));
}

Example #5

File: main.ts Project: duskjet/dyysh

$(document).ready(() => ko.applyBindings(new HelloViewModel("TypeScript Ebosos1", "Knockout")));

Example #6

 this.viewModel.init().then(() => {
   // applies bindings
   ko.applyBindings(this.viewModel, element);
   resolve();
 });

Example #7

File: startup.ts Project: chiyiangel/generator-ko-ts

/// <reference path="./../references.d.ts" />

import * as ko from "knockout";
import * as $ from "jquery";
import * as bootstrap from "bootstrap";
import * as router from "./router";

// Components can be packaged as AMD modules, such as the following:
ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' });
ko.components.register('home-page', { require: 'components/home-page/home' });

// ... or for template-only components, you can just point to a .html file directly:
ko.components.register('about-page', {
  template: { require: 'text!components/about-page/about.html' }
});

// [Scaffolded component registrations will be inserted here. To retain this feature, don't remove this comment.]

// Start the application
ko.applyBindings({ route: router.currentRoute });

Example #8

File: PaymentView.ts Project: kashifjawed/CCTracking

 onShow() {
     ko.applyBindings(this.viewModel, this.el);
 }

Example #9

File: computedOb.ts Project: xiangnanyue/mygit2

import * as ko from "knockout";

class AppViewModel{
    firstName: KnockoutObservable<string>
    lastName: KnockoutObservable<string>
    fullName: KnockoutComputed<string>

    constructor(firstname: string, lastname: string){
        this.firstName = ko.observable(firstname);
        this.lastName =  ko.observable(lastname);
        this.fullName = ko.computed<string>(() => {
            return this.firstName() + " " + this.lastName();
        });
    }

    showname() {
        return "the name is " + this.firstName() + " " + this.lastName();
    }
}

ko.applyBindings(new AppViewModel("firstname default", "last name default"));

// other compute like pureComputed() which can set read, write and owner

Example #10

File: hello.ts Project: Wayley/ts-tutorial

import * as ko from 'knockout'

class HelloViewModel {
  language: KnockoutObservable<string>
  framework: KnockoutObservable<string>

  constructor(langiage: string, framework: string) {
    this.language = ko.observable(langiage)
    this.framework = ko.observable(framework)
  }
}

ko.applyBindings(new HelloViewModel('ts', 'knockout'))