How to use the ko.observableArray function in ko

var PopupViewModel = function PopupViewModel() {
  var self = this;

  self.totalMusicTabs = ko.observable(1);
  self.musicTabsLoaded = ko.observable(0);
  self.musicTabs = ko.observableArray([]);

  // Tabs from disabled music sites to show in disabled list toggle
  self.disabledMusicTabs = ko.observableArray([]);
  self.disabledSitesOpen = ko.observable(false);

  // Filter hidden players and sort by priority -> siteName -> tabId
  self.sortedMusicTabs = ko.pureComputed(function() {
    var filteredGrouped = _.groupBy(
      _.filter(self.musicTabs(), function(tab) {
        return (tab.canPlayPause() || !tab.hidePlayer);
      }),
      function(tab) { return tab.priority(); }
    );

    var sortedKeys = _.sortBy(
      _.keys(filteredGrouped),
      function(priority) { return priority * -1; }
    );

var PopupViewModel = function PopupViewModel() {
  var self = this;

  self.totalMusicTabs = ko.observable(1);
  self.musicTabsLoaded = ko.observable(0);
  self.musicTabs = ko.observableArray([]);

  // Tabs from disabled music sites to show in disabled list toggle
  self.disabledMusicTabs = ko.observableArray([]);
  self.disabledSitesOpen = ko.observable(false);

  // Filter hidden players and sort by priority -> siteName -> tabId
  self.sortedMusicTabs = ko.pureComputed(function() {
    var filteredGrouped = _.groupBy(
      _.filter(self.musicTabs(), function(tab) {
        return (tab.canPlayPause() || !tab.hidePlayer);
      }),
      function(tab) { return tab.priority(); }
    );

    var sortedKeys = _.sortBy(
      _.keys(filteredGrouped),

_.forEach(sortedKeys, function(key) {
      filteredGroupedSorted.push(
        _.sortBy(
          filteredGrouped[key], ["siteName", "tabId"]
        )
      );
    });

    return _.flatten(filteredGroupedSorted);
  });

  self.isLoaded = ko.pureComputed(function() {
    return self.musicTabsLoaded() == self.totalMusicTabs();
  });

  self.visibleMusicTabs = ko.observableArray([]);
  self.optionsUrl = ko.observable(chrome.runtime.getURL("html/options.html"));

  self.openOptionsPage = function() {
    window.open(self.optionsUrl());
  };

  // Send a request to get the player state of every active music site tab
  chrome.runtime.sendMessage({ action: "get_music_tabs" }, self.getTabStates.bind(this));

  // Setup listener for updating the popup state
  chrome.runtime.onMessage.addListener(function(request) {
    if(request.action === "update_popup_state" && request.stateData) self.updateState(request.stateData, request.fromTab);
  });
};

function EventHubViewer( eventHub ) {
  if( !eventHub ) {
    throw new Error( 'an eventHub must be provided' );
  }

  // used in view model
  this.messages = ko.observableArray();

  this._eventHub = eventHub;

  this._component = new KnockoutComponent( 'br.workbench.event-logger', this );

  this._el = document.createElement("div");
  this._el.className = "presentation-model-viewier";

  var messagesEl = this._component.getElement();
  this._el.appendChild( messagesEl );

  this._eventHub.on( 'new-channel', this._newChannel, this );
}
br.implement( EventHubViewer, WorkbenchComponent );

function EventHubViewer( eventHub ) {
  if( !eventHub ) {
    throw new Error( 'an eventHub must be provided' );
  }

  // used in view model
  this.messages = ko.observableArray();

  this._eventHub = eventHub;

  this._component = new KnockoutComponent( 'br.workbench.event-logger', this );

  this._el = document.createElement("div");
  this._el.className = "presentation-model-viewier";

  var messagesEl = this._component.getElement();
  this._el.appendChild( messagesEl );

  this._eventHub.on( 'new-channel', this._newChannel, this );
}
br.implement( EventHubViewer, WorkbenchComponent );

function EventHubViewer( eventHub ) {
  if( !eventHub ) {
    throw new Error( 'an eventHub must be provided' );
  }

  // used in view model
  this.messages = ko.observableArray();

  this._eventHub = eventHub;

  this._component = new KnockoutComponent( 'br.workbench.event-logger', this );
  
  this._el = document.createElement("div");
  this._el.className = "presentation-model-viewier";

  var messagesEl = this._component.getElement();
  this._el.appendChild( messagesEl );

  this._eventHub.on( 'new-channel', this._newChannel, this );
}
br.implement( EventHubViewer, WorkbenchComponent );

}else{
                    if (!deepEqual(_this[backingFieldName], _this.getEntity()[propertyName])) _this[backingFieldName](deepConvert(_this.getEntity()[propertyName]));
                }

                return _this[backingFieldName];
            },
            storeProperty: function (memberDefinition, value) {
            },
            equalityComparers: { type: ko.observable }
        };

        var properties = originalType.memberDefinitions.getPublicMappedProperties();
        for (var i = 0, l = properties.length; i < l; i++) {
            var propName = properties[i].name;
            instanceDefinition[propName] = {
                type: properties[i].type == Array ? ko.observableArray : ko.observable
            };
            instanceDefinition["ValidationErrors"] = {
                type: ko.observableArray
            };
        }

        $data.Class.defineEx(
            observableClassNem,
            [{ type: $data.KoObservableEntity, params: [new $data.Class.ConstructorParameter(0), function () { return originalType }] }],
            null,
            instanceDefinition,
            {
                isWrappedType: function (type) { return type === originalType; }
            });

        $data.Container.registerConverter(observableClassNem, originalType, function (value) {

function MusicSite(attributes) {
    var self = this;

    self.id = attributes.id;
    self.sanitizedId = attributes.id.replace(/[\.,"']/g, "");
    self.name = attributes.name;
    self.enabled = ko.observable(attributes.enabled);
    self.priority = ko.observable(attributes.priority);
    self.alias = ko.observableArray(attributes.alias || []);
    self.showNotifications = ko.observable(attributes.showNotifications);
    self.removedAlias = [];
    self.aliasText = ko.observable("");

    self.toggleSite = function() {
      self.enabled(!self.enabled.peek());
    };

    self.toggleNotifications = function() {
      var internalToggleNotifications = function() {
        self.showNotifications(!self.showNotifications.peek());
      };

      chrome.permissions.contains({
        permissions: ["notifications"],
        origins: ["http://*/*", "https://*/*"]

var OptionsViewModel = function OptionsViewModel() {
  var self = this;

  self.selectedTab = ko.observable("sites");

  self.sitelistInitialized = ko.observable(false);
  self.settingsInitialized = ko.observable(false);
  self.sitelist = ko.observableArray([]);
  self.commandList = ko.observableArray([]);

  self.loadingComplete = ko.pureComputed(function() {
    return self.sitelistInitialized() && self.settingsInitialized();
  });

  chrome.commands.getAll(function(commands) {
    self.commandList(commands);
  });

  self.openExtensionKeysPage = function() {
    chrome.tabs.create({
      url: "chrome://extensions/configureCommands"
    });
  };

var OptionsViewModel = function OptionsViewModel() {
  var self = this;

  self.selectedTab = ko.observable("sites");

  self.sitelistInitialized = ko.observable(false);
  self.settingsInitialized = ko.observable(false);
  self.sitelist = ko.observableArray([]);
  self.commandList = ko.observableArray([]);

  self.loadingComplete = ko.pureComputed(function() {
    return self.sitelistInitialized() && self.settingsInitialized();
  });

  chrome.commands.getAll(function(commands) {
    self.commandList(commands);
  });

  self.openExtensionKeysPage = function() {
    chrome.tabs.create({
      url: "chrome://extensions/configureCommands"
    });
  };

  chrome.runtime.getPlatformInfo(function(platformInfo){