Mithril Components

  • Författare
  • Meddelande
Användarvisningsbild

efo

dbwebb

  • Inlägg: 249
  • Blev medlem: 15 aug 2016, 11:58
  • Ort: Rödeby

Mithril Components

Inlägg12 apr 2018, 13:12

Fick nedanstående fråga på Gitter:
Vad betyder detta felet egentligen
Error: The selector must be either a string or a component.


Svaret blev:
En selector är ett HTML-element som en sträng till exempel "h1", "p", "div" eller liknande.

En Component är ett objekt med en view funktion. Components är ett trevligt sätt att dela upp vyer i sub-vyer.


Jag tänkte vidareutveckla lite på den beskrivningen och komma med ett par tips om hur man kan använda Components. Först en länk till mithril dokumentationen om Components. I kursrepot finns ett exempel på komponenter: Calendar.


I videoserien för webapp-v3 finns ett bra exempel.


En komponent är ett objekt med en view-funktion, så alla vyer vi skriver är i grund och botten en komponent. När jag gör vyer i mithril brukar jag ofta göra stommen i view-funktionen i komponenten som exporteras från vyn. Sen gör jag komponenter för de olika 'states' en vy kan ha till exempel. Inget data, det har hänt ett fel, data är hämtad osv...

Ett exempel på detta kan vara en listning som i nedanstående kod-exempel:

Kod: Markera allt
"use strict";

var m = require("mithril");
var invoices = require("../models/invoices.js");

var bodyWithData = {
    view: function() {
        return invoices.allInvoices.map(function(invoice) {
            return m("tr", [
                m("td", [
                    m("a", {
                        href: "/invoice/" + invoice.id,
                        oncreate: m.route.link
                    },
                    invoice.name)
                ]),
                m("td", invoice.total_price)
            ]);
        });
    }
};

var bodyWithoutData = {
    view: function() {
        return m("tr", [
            m("td", "Finns inga fakturor"),
            m("td", "")
        ]);
    }
};

module.exports = {
    oninit: function() {
        if (invoices.token === "") {
            m.route.set("/");
        } else {
            invoices.loadInvoices();
        }
    },
    view: function() {
        return [
            m("h1", "Fakturor"),
            m("table.table.table-scroll", [
                m("thead", [
                    m("tr", [
                        m("th", "Kund"),
                        m("th", "Summa")
                    ])
                ]),
                m("tbody", invoices.allInvoices.length > 0 ? m(bodyWithData) : m(bodyWithoutData))
            ]),
            m("br"),
            m("a.button.green-button.full-width-button", {
                href: "/new_invoice",
                oncreate: m.route.link
            }, "Skapa faktura")
        ];
    }
};

Vilka är online

Användare som besöker denna kategori: Inga registrerade användare och 9 gäster