UNPKG

foam-framework

Version:
58 lines (52 loc) 1.64 kB
<html> <head> <script src="../core/bootFOAM.js"></script> <link rel="stylesheet" type="text/css" href="../core/foam.css" /> <meta name="viewport" content="width=device-width, user-scalable=no"> <script type="text/javascript"> MODEL({ name: 'Person', properties: [ 'id', 'name', { name: 'age', model_: 'IntProperty' }, { name: 'sex', defaultValue: 'M' } ] }); var dao = MDAO.create({ model: Person }); dao.put(Person.create({ id: 1, name: 'Alice', sex: 'F' })); dao.put(Person.create({ id: 2, name: 'Bob' })); dao.put(Person.create({ id: 3, name: 'Carol', sex: 'F' })); dao.put(Person.create({ id: 4, name: 'Dave' })); var view = this.X.foam.ui.SwipeAltView.create({ views: [ this.X.foam.ui.ViewChoice.create({ label: 'All', view: this.X.foam.ui.DAOListView.create({ dao: dao }) }), this.X.foam.ui.ViewChoice.create({ label: 'Men', view: this.X.foam.ui.DAOListView.create({ dao: dao.where(EQ(Person.SEX, 'M')) }) }), this.X.foam.ui.ViewChoice.create({ label: 'Women', view: this.X.foam.ui.DAOListView.create({ dao: dao.where(EQ(Person.SEX, 'F')) }) }) ] }); window.requestAnimationFrame(function() { document.body.innerHTML += view.toHTML(); view.initHTML(); }); </script> </head> <body> <h2>Swipe Alt View</h2> </body> </html>