/component.html

## component.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MFiddle</title>
    <script type="text/montage-serialization">{
        "owner": {
            "properties": {
                "element": {"#": "component"}
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "NGButton": {
            "prototype": "montage/ui/button.reel",
            "properties": {
                "identifier": "NationalGeographic",
                "element": {"#": "NationalGeographic"},
                "label": "National Geographic"
            }
        },

            "ERBButton": {
            "prototype": "montage/ui/button.reel",
            "properties": {
                "identifier": "ERB",
                "element": {"#": "ERBButton"},
                "label": "Epic Rap Battles"
            }
        }
    }</script></head>
<body>
    <div data-montage-id="component">
    	<button data-montage-id="NationalGeographic"></button>
        <button data-montage-id="ERBButton"></button>
    </div>
</body>
</html>

## component.js
var Montage = require("montage").Montage,
    Component = require("montage/ui/component").Component,
    Promise = require("montage/core/promise").Promise,
    Uuid = require("montage/core/uuid"),
    Map = require("montage/collections/map");

exports.Owner = Montage.create(Component, {

    didCreate: {
        value: function () {
            this._channelIdDeferredDataMap = new Map();
        }
    },

    _channelIdDeferredDataMap: {
        value: null
    },

    handleAction: {
        value: function (evt) {
            var channelId = evt.target.identifier;

            console.log("Loading Data for Channel", channelId);
            this.loadChannel(channelId).then(function (data) {
                console.log("Loaded Data for Channel", channelId, data);
            }).done();
        }
    },

    loadChannel: {
        value: function (channelId) {

            var deferredData = this._channelIdDeferredDataMap.get(channelId);

            if (!deferredData) {
                deferredData = Promise.defer();
                this._channelIdDeferredDataMap.set(channelId, deferredData);

                var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_");

                window[callbackName] = function(data) {
                    deferredData.resolve(data);
                    delete window[callbackName];
                };

                // create url
                var url = "http://gdata.youtube.com/feeds/api/users/" + channelId + "/uploads?v=2&alt=json-in-script&callback=" + callbackName;

                console.log("Sending request for url", url);
                var script = deferredData.script = document.createElement("script");
                script.src = url;
                this.needsDraw = true;
            } else {
                console.log("already have request for channel");
            }

            return deferredData.promise;
        }
    },

    draw: {
        value: function () {
            var self = this;
            this._channelIdDeferredDataMap.values().forEach(function (value) {
                if (!value.script.parentElement) {
                    self.element.appendChild(value.script);
                }
            });
        }
    }

});

## settings.json
{}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MFiddle</title>
	<script type="text/montage-serialization">{
	"owner": {
	"properties": {
	"element": {"#": "component"}
	},
	"listeners": [
	{
	"type": "action",
	"listener": {"@": "owner"}
	}
	]
	},
	"NGButton": {
	"prototype": "montage/ui/button.reel",
	"properties": {
	"identifier": "NationalGeographic",
	"element": {"#": "NationalGeographic"},
	"label": "National Geographic"
	}
	},

	"ERBButton": {
	"prototype": "montage/ui/button.reel",
	"properties": {
	"identifier": "ERB",
	"element": {"#": "ERBButton"},
	"label": "Epic Rap Battles"
	}
	}
	}</script></head>
	<body>
	<div data-montage-id="component">
	<button data-montage-id="NationalGeographic"></button>
	<button data-montage-id="ERBButton"></button>
	</div>
	</body>
	</html>
	var Montage = require("montage").Montage,
	Component = require("montage/ui/component").Component,
	Promise = require("montage/core/promise").Promise,
	Uuid = require("montage/core/uuid"),
	Map = require("montage/collections/map");

	exports.Owner = Montage.create(Component, {

	didCreate: {
	value: function () {
	this._channelIdDeferredDataMap = new Map();
	}
	},

	_channelIdDeferredDataMap: {
	value: null
	},

	handleAction: {
	value: function (evt) {
	var channelId = evt.target.identifier;

	console.log("Loading Data for Channel", channelId);
	this.loadChannel(channelId).then(function (data) {
	console.log("Loaded Data for Channel", channelId, data);
	}).done();
	}
	},

	loadChannel: {
	value: function (channelId) {

	var deferredData = this._channelIdDeferredDataMap.get(channelId);

	if (!deferredData) {
	deferredData = Promise.defer();
	this._channelIdDeferredDataMap.set(channelId, deferredData);

	var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_");

	window[callbackName] = function(data) {
	deferredData.resolve(data);
	delete window[callbackName];
	};

	// create url
	var url = "http://gdata.youtube.com/feeds/api/users/" + channelId + "/uploads?v=2&alt=json-in-script&callback=" + callbackName;

	console.log("Sending request for url", url);
	var script = deferredData.script = document.createElement("script");
	script.src = url;
	this.needsDraw = true;
	} else {
	console.log("already have request for channel");
	}

	return deferredData.promise;
	}
	},

	draw: {
	value: function () {
	var self = this;
	this._channelIdDeferredDataMap.values().forEach(function (value) {
	if (!value.script.parentElement) {
	self.element.appendChild(value.script);
	}
	});
	}
	}

	});