extending-mobile-frontend

adding-files.coffee

# in your plugins init-function:
init: (@app, @framework, @config) =>
  # [...]
  # wait till all plugins are loaded
  @framework.on "after init", =>
    # Check if the mobile-frontent was loaded and get a instance
    mobileFrontend = @framework.pluginManager.getPlugin 'mobile-frontend'
    if mobileFrontend?
      mobileFrontend.registerAssetFile 'js', "pimatic-your-plugin/app/some-js.coffee"
      mobileFrontend.registerAssetFile 'css', "pimatic-your-plugin/app/css/some-css.css"
      mobileFrontend.registerAssetFile 'html', "pimatic-your-plugin/app/some-html.jade"
    else
      env.logger.warn "your plugin could not find the mobile-frontend. No gui will be available"

item-class.coffee

$(document).on( "templateinit", (event) ->

  # define the item class
  class CustomDeviceItem extends pimatic.DeviceItem
    constructor: (data) ->
      super(data)
      # Do something, after create: console.log(this)
    afterRender: (elements) -> 
      super(elements)
      # Do something after the html-element was added
    onButtonPress: ->
      $.get("/api/device/#{@deviceId}/actionToCall").fail(ajaxAlertFail)
      
  # register the item-class
  pimatic.templateClasses['customdevice'] = CustomDeviceItem
)

item-template.html

<script id="customdevice-template" type="text/template">
  <li class="sortable device no-header">
    <label data-bind="text: name" class="device-label"></label>
    <a data-bind="click: onButtonPress" class="ui-btn ui-mini ui-btn-inline ui-corner-all">click me</a>
  </li>
</script>