mvc-framework

⁜ MVC Framework

 ▴ PAC Framework With MVC Framework Subpatterns
    ▵ Manage Simplex/Complex Browser Applications & Websites With Familiar Plain JS Notation
    ▵ Mediate Model, View, Router, And Controller Events With Event-Driven Core Architecture
    ▵ Capture Detailed Object/Array Mutator Method Events Including Subproperty Events

 ⁘ Uses Core-Plex - Event Listener Management System
 ❂ Uses Objecture - Object Watcher, Property Manager

※ Independent Classes

SYM	NAME	DESCRIPT	API	GUIDE
M	Model	Manage schematized content.	▶	▶
X	Model Schema	Manage data schema.	▶	▶
D	Model Content	Manage data content.	▶	▶
V	View	Manage templated markup elements.	▶	▶
R	Router	Window location router or fetch router.	▶	▶
RL	Router (Location)	Manage window location.	▶	▶
RF	Router (Fetch)	Manage AJAX connection.	▶	▶
RS	Router (Socket)	Manage Socket connection.	▶	▶
C	Control	Manage Model, View, Control, Location/fetch Routers.	▶	▶

※ Interdependent Class Structures

FORMULA	NAME	ACRONYM	DESCRIPT
CMVRC*	Control (Model, View, Router, Controls)	CMVRC	Control class instances contain model, view, router, and subcontrol class instances.
MVRM*	Model (View, Router, Models)	MVRM	Model class instances contain view, router, and submodel class instances.
VMRV*	View (Model, Router, Views)	VMRV	View class instances contain model, router, and subview class instances.
RMVR*	Router (Model, View, Routers)	RMVR	Router class instances contain model, view, and subrouter class instances.

※ Illustrations

PAC (CMVRC)

const control = new Control({
  models: {
    ui: new Model({
      selected: false,
      anchor: { text: "Product Detail" },
    }),
    content: new Model({
      id: "0246813579",
      name: "Some Product Name",
      price: "$235.78",
      descript: "Some product description.",
      graphic: "https://pbs.twimg.com/media/Grhfq0JaIAAPIqI?format=jpg&name=medium",
      anchor: "https://x.com/StellarManatee/status/1925394081796223237",
    }),
  },
  views: {
    default: new View({
      templates: { default: ($models) => {
        const { ui, content } + $models
        return `
          <product data-selected="${ui.selected}">
            <text>
              <name>${content.name}</name>
              <descript>${content.descript}</descript>
              <price>${content.price}</price>
              <a href="${content.anchor}" target="_blank">${ui.anchor.text}</a>
            </text>
            <graphic>
              <img src="${content.graphic}" />
            </graphic>
          </product>
        `
      } },
      querySelectors: { querySelector: {
        'product': ':scope'
      } },
    })
  },
}, {
  events: {
    'models.ui setProperty:selected': function($event) {
      this.views.qs.product.setAttribute($event)
    }
  },
})