Frint-model NPM

frint-model

Model package for Frint

WARNING: This package has been deprecated!

Use frint-data instead.

Guide

Installation

With npm:

$ npm install --save frint-model

Via unpkg CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.0/Rx.min.js"></script>

<script src="https://unpkg.com/frint-model@latest/dist/frint-model.min.js"></script>

<script>
  // available as `window.FrintModel`
</script>

Terminologies

Model: An object that holds data, e.g. configuration, customer information, etc.
attributes: The actual data in plain object, which is fed to the Model during construction.

Usage

Let's import the necessary function from the library first:

import { createModel } from 'frint-model';

Now we can create our Model:

const Shirt = createModel({
  getColor: function () {
    return this.get('color');
  },
  getSize: function () {
    return this.get('size');
  },
});

Building a new model instance object:

const shirt = new Shirt({
  color: 'blue',
  size: 'medium',
});

const color = shirt.getColor(); // blue
const size = shirt.getSize();   // medium

The model instance can also be observed for changes:

shirt.get$().subscribe(function (shirtAttributes) {
  // triggered when the model had any change
});

shirt.get$('color').subscribe(function (color) {
  // triggered when the model's `color` key changes
});

API

Model

Model

The base Model class. You can extend the base Model class freely to your own like.

Example

import { Model } from 'frint-model';

export default class Shirt extends Model {
  getColor() {
    return this.get('color');
  }

  getSize() {
    return this.get('size');
  }
}

createModel

createModel(extend)

Creates and returns an ES6 compatible class. Useful in non-ES6 compatible environments.

Arguments

extend (Object): An object with the functions to extend the base Model class with.

Returns

Function: ES6 compatible class.

Example

const Shirt = createModel({
  getColor: function () {
    return this.get('color');
  },
  getSize: function () {
    return this.get('size');
  },
});