Sitecore 8 SPEAK - Calling Custom components Javascript method

My question is somewhat similar to followin unanswered question. (Not sure though) Sitecore 8 SPEAK: Getting an Error When calling a Method in JS File

I am using Sitecore8

On my page there is a button and on its click event I want to call add() of custom datasource component.

Layout:

JS Code for the Page:

define(["sitecore"], function (Sitecore) {
  var JsonListPage = Sitecore.Definitions.App.extend({
  initialized: function () {
      alert('Inside Json PageList Init');

  },
  loadData: function () {
      alert('Button clicked');
      app.add();
  }
  });

  return JsonListPage;
});

JS Code for the custom datasource component:

define(["sitecore"], function (Sitecore) {
    var model = Sitecore.Definitions.Models.ControlModel.extend({
        initialize: function (options) {
        this._super();
        this.set("json", null);
        alert('Inside Jsondatasource Init');
    },
    add: function (data) {

        var json = this.get("json");
        if (json === null)
            json = new Array();

        // this is done because array.push changes the array to an object which then do no work on the SPEAK listcontrol.
        var newArray = new Array(json.length + 1);
        for (var i = json.length - 1; i >= 0; i--)
            newArray[i + 1] = json[i];
        newArray[0] = data;
        this.set("json", newArray);
    }
});

var view = Sitecore.Definitions.Views.ControlView.extend({
    initialize: function (options) {
        this._super();
        this.model.set("json", null);
    }
});

Sitecore.Factories.createComponent("JsonDatasource", model, view, ".x-sitecore-jsondatasource"); 

});

.cshtml for Custom component:

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Web.UI.Controls.Common.UserControls
@model RenderingModel
@{
    var userControl =     Html.Sitecore().Controls().GetUserControl(Model.Rendering);
    userControl.Requires.Script("client", "JsonDatasource.js");
    userControl.Class = "x-sitecore-jsondatasource";
    userControl.Attributes["type"] = "text/x-sitecore-jsondatasource";
    userControl.DataBind = "Json: json";

    var htmlAttributes = userControl.HtmlAttributes;
}      
<div @htmlAttributes>
    am here  again
</div>

When the page loads:

• It shows alert from Custom components Init
• Then shows alert from host page's Init
• On button click it shows the alert and after that gives error on "app".

There is some bit which I am missing.. any help would be appreciated.. Please let me know if you need anymore inputs.

Thanks in advance!

app is only available in debug mode so id avoid using that, use "this" instead.

From your code example it appears that you are calling app.Add(), There is no Add function on your pageCode, this is what your code is doing. Instead you need to access your components's Add Method.

Instead to access events within your component you want to call the function like this:

this.ComponentID.Add();

I have an example of a custom SPEAK component here you can refer to for how to create the component. https://github.com/sobek1985/MikeRobbinsSPEAKRichTextEditor

From the code is seems your creating a JSON datasource, there is an example by Anders here http://laubplusco.net/creating-simple-sitecore-speak-json-datasource/