Meiosis Documentation

Table of Contents

Computed Properties

In this section, we'll look at adding computed properties to our model.

Preparing Data for the View

Computed properties are properties that are the result of some calculation bassed on other values of the model. We'd like to have those properties made available to the view, but we want to keep the computation logic out of the view code.

Here is an example:

export const createTemperature = update => {
  const computed = model => {
    let temp = model.value;

    if (model.units === "F") {
      temp = Math.round((temp - 32) * 5 / 9);
    }
    model.comment = (temp < 10) ? "COLD!" : (temp > 40) ? "HOT" : "";

    return model;
  };
};

In our temperature component model, we've added a comment property. When the temperature is less than 10 degrees Celsius, the comment will say COLD!. Over 40 degrees Celsius, it will say HOT. In between, the comment will be blank. If the temperature is in Farenheit, we'll first convert the temperature to Celsius.

Wrapping the View function

To use the computed function, we'll wrap our view so that the model goes through computed before being passed on to the view:

  const view = createView(createActions(update));

  return {
    model: () => ({
      date: "",
      value: 20,
      units: "C"
    }),

    view: model => view(computed(model))
  };
}

Now, we can simply display the comment in the view:

<span>Temperature: {model.value}&deg;{model.units} {model.comment}</span>

The view is free from computed property logic, and component instances remain independent of one another.

Principles / Takeaways

Up Next

This completes the part of Meiosis covering components. In the next part, we'll look at alternative strategies for nesting models: Lodash FP, Ramda, and Patchinko.

Table of Contents


Meiosis is developed by @foxdonut00 / foxdonut and is released under the MIT license.