Mipha
a simple and simple mvvm library
Mipha (ミファー Mifā) is a character in The Legend of Zelda: Breath of the Wild. She is the Princess of the Zora and a major character. Mipha is also the Zora Champion, one of Link's allies, and wears the same blue cloth as Daruk, Urbosa and Revali. This blue cloth is similar to the blue shirts worn by Link and Zelda. Zelda Wiki
Example
let mipha = template: `<div id="mipha"> <h1>{title}</h1> {if zelda} <p>{hello}</p> {/if} </div>` state: title: 'Mipha' zelda: true hello: 'a simple and simple mvvm library' { console } { console } mipha
How to USE
Template Syntax
- Text
{ message }
- Html
- Using JavaScript Expressions
{ x + 1 }{ ok ? 'YES' : 'NO' }{ message.split('').reverse().join('') }
props bindings
<!-- display none or not -->
Conditional Rendering
{if x === 1}1{elseif x === 2}2{else}3{/if}
List Rendering
{list items as item} {item}{item_index} {/list}
use item_index
for list index
Event Handling
if you want to handle event object, use $event
Data Bind
this
Component support
see base example
restrict
- only one root node
- {if} only support one root node too...
- Mipha will remove all white space in template...
TodoMVC Example
see TodoMVC