function AppViewModel() { var me = this; me._colorToStr = function(c) { return c ? ['rgba(', c.r, ',', c.g, ',', c.b, ',', c.a, ')'].join('') : ''; }; me._isActiveItem = function(item) { var ai = this.activeItem(); return item && ai && item.name === ai.name; }; me.data = ko.observable({ header: { bgColor: { r: 19, g: 30, b: 41, a: 1 }, textColor: { r: 230, b: 180, g: 145, a: 1 } }, footer: { bgColor: { r: 1, g: 2, b: 3, a: 1 }, items: [] } }); me.activeItem = ko.observable({}); me.setDefaultActiveItem = function() { me.activeItem($.grep(this.data().footer.items, function(e) { return e.active; })[0]); }; me.headerTitle = ko.computed(function() { var activeItem = this.activeItem(); return activeItem ? activeItem.text : ''; }, me); me.headerBgColor = ko.computed(function() { return this._colorToStr(this.data().header.bgColor); }, me); me.headerTextColor = ko.computed(function() { return this._colorToStr(this.data().header.textColor); }, me); me.footerBgColor = ko.computed(function() { return this._colorToStr(this.data().footer.bgColor); }, me); me.footerItems = ko.computed(function() { return this.data().footer.items; }, me); me.footerItemClick = function(item) { me.activeItem(item); // load iframe var mc = $('#app-middle-content').empty(); var ai = me.activeItem(); var url = ai && ai.onTap.startsWith('ph://webview?url=') && decodeURIComponent(ai.onTap.replace('ph://webview?url=', '')); if (url) { mc.append(['