UserSettingsStorage

by Paweł Niemczyk

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/amplifyjs/1.1.0/amplify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="preview"> </div>
<div id="updater">
    <p>UserName: <input name="name" type="text" /></p>
    <p>LastUrl: <input name="url" type="text" /></p>
    <p><button name="update">Update</button></p>
</div>

<script id="settings-template" type="text/x-handlebars-template">
    <p>User name: {{userName}}</p>
    <p>lastUrl: {{lastUrl}}</p>
</script>

CoffeeScript

l = (m) -> console.log m
class UserBrowserSettingsModel extends Backbone.Model
    storageKey: -> @constructor.name
    defaults:
        userName: 'none'
        lastUrl: ''
    initialize: (opts={})->
        @fetch() if _.isEmpty(opts)
        @on('change', @save, @)
    fetch: ->
        l amplify.store(@storageKey())
        @set(amplify.store(@storageKey()), silent:true)
    save: ->
        amplify.store(@storageKey(), @toJSON())
       
class UserBrowserSettingsPreviewView extends Backbone.View
    el: '#preview' 
    initialize: ->
        @model.on('change', @render, @) 
        source = $("#settings-template").html()
        @template = Handlebars.compile(source)   
        @render()
    render: ->
        @$el.html(@template(@model.toJSON()))
        @$el
class UserBrowserSettingsUpdaterView extends Backbone.View
    el: '#updater'
    events:
        "click button[name='update']": 'updateModel'
    updateModel: ->
        @model.set('userName', @$el.find('input[name="name"]').val())
        @model.set('lastUrl', @$el.find('input[name="url"]').val())
        @model.trigger('change')
model       = new UserBrowserSettingsModel()
preView     = new UserBrowserSettingsPreviewView(model: model)
updaterView = new UserBrowserSettingsUpdaterView(model: model)