update example

best-practices.md

@@ -27,7 +27,7 @@
     - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...).
     - put arguments in an option *{}* for non critical and for optionnal arguments.
     - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments.
-
+  
 - look them up, discuss them, update them.
     
 ## Module Definition (example)
@@ -52,22 +52,15 @@ var css = csjs`
 `
 
 class UserCard {
-  constructor (opts = {}) {
+  constructor (api, events, opts = {}) {
     var self = this
 
     self.event = new EventManager()
-    self._api = opts.api
+    self.opts = opts
+    self._api = api
+    self._consumedEvents = events
     self._view = undefined
-    self.state = {
+    
-      title: opts.title,
-      name: opts.name,
-      surname: opts.surname,
-      totalSpend: 0,
-      _nickname: opts.nickname,
-      _funds: self._api.getUserFunds()
-    }
-    var events = opts.events
-
     events.funds.register('fundsChanged', function (amount) {
       if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount
       self.state._funds = amount
@@ -77,7 +70,7 @@ class UserCard {
   }
   render () {
     var self = this
-    var el = yo`
+    var view = yo`
       <div class=${css.userCard}>
         <h1> @${self.state._nickname} </h1>
         <h2> Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname} </h2>
@@ -86,17 +79,16 @@ class UserCard {
         <button class=${css.clearFunds} onclick=${e=>self._spendAll.call(self, e)}> spend all funds </button>
       </div>
     `
-    if (self._view) yo.update(self._view, el)
+    if (!self._view) {
-    else self._view = el
+      self._view = view
+    }
     return self._view
   }
-  update (state = {}) {
+  update () {
-    var self = this
+    yo.update(this._view, this.render())
-    if (!self._view) self._constraint('first initialize view by calling `.render()`')
+  }
-    if (state.hasOwnProperty('title')) self.state.title = state.title
+  setNickname (name) {
-    if (state.hasOwnProperty('name')) self.state.name = state.name
+    this._nickname = name
-    if (state.hasOwnProperty('surname')) self.state.surname = state.surname
-    self.render()
   }
   getNickname () {
     var self = this
@@ -139,16 +131,20 @@ setInterval(function () {
 // 2. EXAMPLE USAGE
 var UserCard = require('./user-card')
 
-var usercard = new UserCard({
+var usercard = new UserCard(
-  api: { getUserFunds, clearUserFunds },
+  { getUserFunds, clearUserFunds }, 
-  events: { funds: funds.event },
+  { funds: funds.event },
-  title: 'Dr.',
+  {
-  name: 'John',
+    title: 'Dr.',
-  surname: 'Doe',
+    name: 'John',
-  nickname: 'johndoe99'
+    surname: 'Doe',
-})
+    nickname: 'johndoe99'
+  })
 
 var el = usercard.render()
 document.body.appendChild(el)
-setTimeout(function () { usercard.update({ title: 'Prof.' }) }, 5000)
+setTimeout(function () {
+  userCard.setNickname('new name') 
+  usercard.update()
+}, 5000)
 ```