/* globals define */
define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
'use strict';
// ----------------------------------------------
// Define a Knockout ViewModel for your template
// ----------------------------------------------
var SampleComponentViewModel = function(args) {
var SitesSDK = args.SitesSDK;
// create the observables -- this allows updated settings to automatically update the HTML on the page
this.headingText = ko.observable();
//
// Handle property changes from the Settings panel
//
this.updateCustomSettingsData = $.proxy(function(customData) {
this.headingText(customData && customData.headingText);
}, this);
this.updateSettings = function(settings) {
if (settings.property === 'customSettingsData') {
this.updateCustomSettingsData(settings.value);
}
};
// Register your updateSettings listener to recieve SETTINGS_UPDATED events
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this));
//
// Get the initial settings data for the component and apply it
//
SitesSDK.getProperty('customSettingsData', this.updateCustomSettingsData);
};
// ----------------------------------------------
// Create a knockout based component implemention
// ----------------------------------------------
var SampleComponentImpl = function(args) {
// Initialze the custom component
this.init(args);
};
// initialize all the values within the component from the given argument values
SampleComponentImpl.prototype.init = function(args) {
this.createViewModel(args);
this.createTemplate(args);
this.setupCallbacks();
};
// create the viewModel from the initial values
SampleComponentImpl.prototype.createViewModel = function(args) {
// create the viewModel
this.viewModel = new SampleComponentViewModel(args);
};
// create the template based on the initial values
SampleComponentImpl.prototype.createTemplate = function(args) {
// create a unique ID for the div to add, this will be passed to the callback
this.contentId = args.id + '_content_' + args.viewMode;
// create a hidden custom component template that can be added to the DOM
this.template = '<div id="' + this.contentId + '">' +
template +
'</div>';
};
//
// SDK Callbacks
// setup the callbacks expected by the SDK API
//
SampleComponentImpl.prototype.setupCallbacks = function() {
//
// callback - render: add the component into the page
//
this.render = $.proxy(function(container) {
var $container = $(container);
// add the custom component template to the DOM
$container.append(this.template);
// apply the bindings
ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
}, this);
//
// callback - dispose: cleanup after component when it is removed from the page
//
this.dispose = $.proxy(function() {
// nothing required for this sample since knockout disposal will automatically clean up the node
}, this);
};
// ----------------------------------------------
// Create the factory object for your component
// ----------------------------------------------
var sampleComponentFactory = {
createComponent: function(args, callback) {
// return a new instance of the component
return callback(new SampleComponentImpl(args));
}
};
return sampleComponentFactory;
});