Extensible view in bquery

bquery-extensible-views.coffee

Ratio = require('ratio')

EditableRatioPlugin = (v) ->
  v.defaults 'editable-ratio',
    rawTemplate: require('./template')
    noModel: true

  v.set "setFrac", (n, d) ->
    r = if n instanceof Ratio then n else Ratio(n,d)
    @model.set("value", r)

  v.on("click .frac-one-half",   -> @setFrac(1,2))
  v.on("click .frac-one-third",  -> @setFrac(1,3))
  v.on("click .frac-one-sixth",  -> @setFrac(1,6))
  v.on("click .frac-two-thirds", -> @setFrac(2,3))

  v.boundVal "value", ".ratio",
    toView: (v) -> v.toString()
    fromView: (v) -> Ratio(v)


EditableRatio = module.exports = bQuery.view().use(EditableRatioPlugin).make()
module.exports.EditableRatioPlugin = EditableRatioPlugin


## Extended view
EditableUserRatioPlugin = (v) ->
  v.use EditableRatioPlugin
  v.init ->
    @on 'render', =>
      @$('.js-buttons').append("<button class='btn btn-small rest'>rest</button>")
  v.on("click .rest", -> @trigger 'rest')

EditableUserRatio = bQuery.view().use(EditableUserRatioPlugin).make()