nope/wiki/11-Observables.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Observables\n",
    "## Usage of `nope.observables`\n",
    "\n",
    "Import Nope.\n",
    "\n",
    "```typescript\n",
    "import * as nope from \"nope\";\n",
    "```\n",
    "\n",
    "In our nodebook, we have to use **javascript** instead of **typescript**:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// First lets install nope using npm\n",
    "const nope = require(\"../dist-nodejs/index.nodejs\")\n",
    "\n",
    "// Create our Observable:\n",
    "const obs = new nope.observables.NopeObservable()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `setContent`: Change the content of the Observable.\n",
    "\n",
    "To change the content of an observable use the function `setContent`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Set the content to \"1337\"\n",
    "obs.setContent(5);\n",
    "\n",
    "// Print the content (see getContent)\n",
    "console.log(\"current value =\",obs.getContent());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### `setter`: Define a specific setter for the observable.\n",
    "\n",
    "You can specify a specifc getter for the observable for instance, to limit the number to the following constrains `> 0` and `< 10`.\n",
    "\n",
    "---\n",
    "\n",
    "The setter function will receive multiple parameters, as listed below:\n",
    "\n",
    "1. `value`,\n",
    "2. ``options`` containing:\n",
    "    * `sender`: The Element, which changed the data\n",
    "    * `timestamp`: The timestamp of the change\n",
    "    * `args`: additional args. \n",
    "\n",
    "---\n",
    "\n",
    "The setter function have to return a `dict` with the following keys:\n",
    "| key | type | content |\n",
    "| - | - | - |\n",
    "| `valid` | `bool` | A Flag, to show whether the data are valid or not. If the data is invalid, the observable wont store them |\n",
    "| `value` | `any` | The Data that has been adapted |\n",
    "\n",
    "---\n",
    "\n",
    "Below, we will implement an example to show the setter above."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "obs.setter = (value, options) => {\n",
    "  // Print, which data we received\n",
    "  console.log(\"setter received\", value, options);\n",
    "  // Show the result of our comparison\n",
    "  console.log(\"data is valid:\", (value > 0) && (value < 10));\n",
    "  return {\n",
    "    // The Value\n",
    "    value: value,\n",
    "    // Valid\n",
    "    valid: (value > 0) && (value < 10)\n",
    "  }\n",
    "}\n",
    "\n",
    "// Set the content to \"1337\" ==> But our setter will prevent using this value because it isnt valid.\n",
    "obs.setContent(1337);\n",
    "\n",
    "// Print the content (see getContent) ==> we expect to get \"5\"\n",
    "console.log(\"current value =\", obs.getContent());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To remove such a getter just set the getter property to `null`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "obs.setter = null\n",
    "\n",
    "// Set the content to \"1337\" we do not have any setter ==> we will use this parameter\n",
    "obs.setContent(1337);\n",
    "\n",
    "// Print the content (see getContent) ==> we expect to get \"1337\"\n",
    "console.log(\"current value =\", obs.getContent());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `getContent`: Get the current content of the Observable.\n",
    "To extract the content of our observable, we are able to use the function `getContent`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "let content = obs.getContent();\n",
    "console.log(\"current value =\", content)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If no data is assigned, this will result in `undefined`. Otherwise the current data is returned.\n",
    "\n",
    "#### `getter`: Define a specific getter for the observable.\n",
    "\n",
    "You can specify a specifc getter for the observable for instance, to allways return a `string`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Define a getter\n",
    "obs.getter = (value) => \"Allways this result\";\n",
    "console.log(\"current value (with getter) =\", obs.getContent());"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To remove such a getter just set the getter property to `null`. \n",
    "\n",
    "The Original value is not changed ==> we expect to get \"1337\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Reset the getter.\n",
    "obs.getter = null;\n",
    "console.log(\"current value (after removing the getter) =\", obs.getContent());"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "JavaScript (Node.js)",
   "language": "javascript",
   "name": "javascript"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "application/javascript",
   "name": "javascript",
   "version": "17.3.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}