KOS Developer's Portal

Model Specification

Create a new file at src/models/demo/types/index.d.ts

Create the model Options

// src/models/demo/types/index.d.ts

declare interface IDemoModelOptions {
  name: string;
}

Create the model specification

// src/models/demo/types/index.d.ts

declare interface IDemoModel extends IDemoModelOptions, IKosDataModel {
  id: string;
}

Create the Model Factory

Create a new file at src/models/demo/demo-factory.ts

import { modelFactory } from "@coca-cola/kos-ui-core";
export const DEMO_TYPE = "demo";
export const DemoFactory = modelFactory<IDemoModel, {}>(DEMO_TYPE);

Create the Model Implementation

Create a new file at src/models/demo/demo-model.ts

import { kosModel } from "@coca-cola/kos-ui-core";
import { DemoFactory } from "./demo-factory";
import { getDemo } from "./services/demo-services";

import log from "loglevel";
import { kosAction } from "@coca-cola/kos-ui-components";

@kosModel<IDemoModel, IDemoModelOptions>(DemoFactory.type)
export class DemoModel implements IDemoModel {
  id: string;
  name: string;
  constructor(modelId: string, options: IDemoModelOptions) {
    // assign the id from the passed in model id
    this.id = modelId;
    this.name = options.name;
  }
  async init(): Promise<void> {
    log.info("initialized model");
  }

  /**
   * The load lifecycle method provides an opportunity to hydrate the model with data fetched
   * from the backend.
   */
  async load(): Promise<void> {
    log.info("loaded model");
  }
}

Register the new model

Add the new model to the registry for the application at src/App.tsx.

// src/App.tsx

import { DemoFactory } from "./models/demo/demo-factory";
import { DemoModel } from "./models/demo/demo-model";

export const Registry: IKosRegistry = {
  models: {
    [DemoFactory.type]: {
      class: DemoModel,
    },
  },
  preloadModels: [],
};

Create a New KOS Model

Prerequisites

Steps

Model Specification

Create the Model Factory

Create the Model Implementation

Register the new model

Next

Create a New KOS Model

Prerequisites

Steps

Model Specification

Create the Model Factory

Create the Model Implementation

Register the new model

Next

Send us your feedback!