README.md

Bel.js

Super tiny JavaScript MVC framework

Features

1. Very Small
2. Event emitter (bel.Emitter)
3. bel object is aliased in $
4. the bel() function is overloaded, is an alias to document.querySelector()

Usage

bel()

Return a event emitter with special methods

var foo = bel() // or $()

foo.set

Sets some data to foo.

var foo = bel()
foo.set({
  'a': 23
  'b': "baz"
})

Can also be used like this:

var foo = bel().set({
  'a': 23,
  'b': "baz"
})

Emits a change event.

foo.get

Returns an item from foo

var foo = bel().set({
    "a": {
      "b": "Hello World"
    }
})
foo.get("a").b //Hello World

foo.extend

This is to make views and controllers

var foo = bel().extend({
...
})

You have to write the logic to keep the models, views, and controllers in sync.

var model = $().set({
  "a": 5
})

var view = $().extend({
  "el": $("#test"),
  "init": function(){
    model.on("change", function(){
    view.render()
    })
  },
...
})

var controller = $().extend({
  "bel": $("#myButton"),
  "iel": $(".myInputElement"),
  "init": function(){
    bel.addEventListener("click", function(){
      model.set({ ... })
    })
}

view.init()
controller.init()

No, we don't call init for you. You have to call it.

bel.Emitter

Returns an event emitter

var a = new bel.Emitter()
  a.on("data", function(a){
  alert(a)
})
a.emit("data", "Hello World") // -> Hello World
a.off("data", 0) // Removes the callback

bel.js

(function(){
  function extend(dest, props){
    for (prop in props){
      dest[prop] = props[prop]
    }
  }

  var Emitter = function(){
    this.events = {}
  }

  Emitter.prototype = {
    "on": function(event, cb){
    if (event in this.events === false){
      this.events[event] = []
    }
      this.events[event].push(cb)
    },
    "off": function(event, index){
      delete this.events[event][index]
    },
    "emit": function(event){
      var args = Array.prototype.slice.call(arguments, 1)
      l = this.events[event].slice()
      if (event in this.events === false) return false
      else {
        for (var i = 0;i < l.length;i++){
          l[i].apply(this, args)
        }
      }
    }
  }

  var bel = function(){
    if (arguments.length === 0){
      var o = new Emitter()
      o.on("change", function(){})
      extend(o, {
        "data": {},
        "set": function(ob) {
          for (var i in ob) {
            this.data[i] = ob[i]
          }
          this.emit("change")
          return this
        },
        "get": function(key){
          return this.data[key]
        },
        "extend": function(props){
          for (p in props){
            this[p] = props[p]
          }
          return this
        }
      })
      return o
    } else if (arguments.length === 1) {
      return document.querySelector(Array.prototype.slice.call(arguments, 0))
    }
  }

  bel.Emitter = Emitter

  window.bel = bel
  window.$ = bel
})()

example.js

// <script src="/bel.js"></script>
// full example http://jsbin.com/okuyix/9

  var PersonModel = $().set({
    "name": "test"
  })
  
var NameView = $().extend({
  "el": $("#test"),
  "render": function(){
       this.el.innerHTML = PersonModel.get("name")
  },
  init: function(){
      PersonModel.on("change", function(){
      NameView.el.innerHTML = PersonModel.get("name")
})
}
})

var NameController = $().extend({
   bel: $("#btn"),
   iel: $("#n"),
   init: function(){
       this.bel.addEventListener("click", function(){
       PersonModel.set({"name": NameController.iel.value})
        })
      }
})

NameView.init()
NameController.init()