Is there any way I can do have a Javascript class that extends an object that was created through the revealing module pattern? I tried the following code, but is there away to achieve the same thing?
sv.MergeQuestionViewModel = function () {
this = sv.QuestionDetailViewModal();
this.init($("#mergeQuestionModel"));
};
sv.QuestionDetailViewModal = function () {
var $el,
self = this,
_question = ko.observable(),
_status = new sv.Status();
var _init = function (el) {
$el = el;
$el.modal({
show: false,
backdrop: "static"
});
};
var _show = function () {
$el.modal('show');
};
var _render = function (item) {
_question(new sv.QuestionViewModel(item));
_show();
};
var _reset = function () {
_question(null);
_status.clear();
};
var _close = function () {
$el.modal('hide');
_reset();
};
return {
init: _init,
show: _show,
render: _render,
reset: _reset,
close: _close
};
};
You could use jQuery.extend to achive this behaviour.
sv.MergeQuestionViewModel = function () {
$.extend(this, sv.QuestionDetailViewModal);
this.init($("#mergeQuestionModel"));
};
sv.QuestionDetailViewModal = (function () {
var el,
_init = function($el) {
el = $el;
console.log('init', el);
},
_render = function() {
console.log('render', el);
};
return {
init : _init,
render : _render
};
}());
var view = new sv.MergeQuestionViewModel();
view.render();
Test it on http://jsfiddle.net/GEGNM/
Related
I try the observer pattern (by these two Urls: https://davidwalsh.name/pubsub-javascript, http://www.dofactory.com/javascript/observer-design-pattern) but listeners array is empty when I call the publish function.
main.pagination.event= (function () {
var listeners = [];
return {
subscribe: function (fn) {
listeners.push(fn);
return {
unsubscribe: function (fn) {
listeners= listeners.filter(
function (item) {
if (item !== fn) {
return item;
}
}
);
}
};
},
publish: function () {
//it's empty
listeners.forEach(function (item) {
item("...");
});
}
};
})();
main.pagination.init = function () {
$('ul li').click(function () {
main.pagination.event.publish();
};
};
main.update.init = function() {
var event = main.pagination.event.subscribe(main.update.listener);
};
main.update.listener = function (tbl) {
alert(tbl);
};
Thanks for help.
It is empty because you call subscribe after publish which does not contain anything inside the listeners array. Just change the order of the calls like so
main.update.listener = function (tbl) {
alert(tbl);
};
main.pagination.init = function () {
$('ul li').click(function () {
main.pagination.event.publish();
};
};
main.update.init = function() {
var event = main.pagination.event.subscribe(main.update.listener);
};
main.update.init(); // invoke subscribe first to add the listener to the array
main.pagination.init();
This is my code
Viewmodel 1
function AppViewModel() {
var self = this;
self.boardtext = ko.observable();
self.board = ko.observableArray([
{ boardname: 'Board' },
{ boardname: 'Board' },
{ boardname: 'Board' }
]);
self.addboard = function () {
self.board.push({ boardname: self.boardtext() });
// initialize ListModal to zero
};
self.removeboard = function () {
self.board.remove(this);
}
}
Viewmodel 2
var initialData = [];
var ListModal = function (lists) {
var self = this;
self.cardtext = ko.observable();
self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) {
return { listname: list.listname, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) };
}));
};
ko.applyBindings(new AppViewModel(), document.getElementById("container1"));
ko.applyBindings(new ListModal(initialData), document.getElementById("container2"));
As soon as i press addboard how can i set my ListModal to zero?
If you want to re-initialize listModal, try to wrap those 2 viewmodels in 1 viewmodel so that they can relate to each other. And then you can do the following:
var initialData = [];
var ListModal = function (lists) {
var self = this;
self.cardtext = ko.observable();
self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) {
return { listname: list.listname, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) };
}));
}
function AppViewModel(parent) {
var self = this;
// this will keep the object of ViewModel
self.parentObject = parent;
self.boardtext = ko.observable();
self.board = ko.observableArray([
{ boardname: 'Board' },
{ boardname: 'Board' },
{ boardname: 'Board' }
]);
self.addboard = function () {
self.board.push({ boardname: self.boardtext() });
// re-initialize listModal
self.parentObject.listModal(new ListModal(initialData));
};
self.removeboard = function () {
self.board.remove(this);
};
}
function ViewModel() {
var self = this;
self.appViewModel = ko.observable(new AppViewModel(self));
self.listModal = ko.observable(new ListModal(initialData));
}
// provide another div which wrap container 1 and 2 together
ko.applyBindings(new ViewModel(), document.getElementById("container1And2"));
I get the following error
actions.toggleMenu is not a function
I create a action
module.exports = Reflux.createAction([
'callAi',
'logout',
'fullScreen',
'toggleMenu',
'showSidebar'
]);
I create this store
actions = require('../actions/menu.js');
module.exports = Reflux.createStore({
listenables: actions,
init: function () {
console.log('init', this) // Its good!
},
onCallAi: function () {},
onLogout: function () {},
onFullScreen: function () {},
onToggleMenu: function () {
console.log('actions onToggle', 'inMoment') //Not good
},
onShowSidebar: function () {}
});
And this view
actions = require('../../../../Plus-WRIO-App/js/actions/menu')
store = require('../../../../Plus-WRIO-App/js/stores/menu')
var CreateDomLeft = React.createClass({
mixins: [Reflux.listenTo(store, "log")],
toggle: function(){
console.log('toggle', 'GO');
actions.toggleMenu() // error here!!!
},
render: function() {
return (
<li onClick={this.toggle} className='btn btn-link'></li>
);
}
});
module.exports = CreateDomLeft;
You have a typo. It should be createActions (plural)
I'm trying to create a button class that extends an AbstractComponent class using $.extend() but the functions in AbstractComponent aren't available when I'm constructing the button.
The specific error I'm receiving is:
Uncaught TypeError: Object [object Object] has no method 'setOptions'
var Button = {};
var abstract = new AbstractComponent;
$.extend(Button,abstract);
//debugger;
//this.setOptions is available here
Button = function(options) {
'use strict';
var defaultOptions = {
templateName: '#button-tmpl',
title: "Label goes here",
type: "primary",
size: "medium",
disabled: null,
autosave: null,
href: null,
onclick: null
};
//debugger
//this.setOptions is not available here
this.setOptions(options, defaultOptions);
this.checkRequiredKeys('title');
return this;
};
Button.prototype.updateOptions = function() {
var options = this.options;
if (options.href === null) {
options.href = 'javascript:;';
}
if (options.disabled === null) {
options.disabled = 'disabled';
}
if (options.autosave === true) {
options.autosave = 'ping-autosave';
}
};
AbstractComponent.js
var AbstractComponent = function() {
console.log('this will be the constructor for elements extending this class');
};
AbstractComponent.prototype.show = function() {
this.render();
};
AbstractComponent.prototype.close = function() {
// stop listeners and remove this component
this.stopListening();
this.remove();
};
AbstractComponent.prototype.getTemplateName = function() {
return this.options.templateName;
};
AbstractComponent.prototype.checkRequiredKeys = function() {
var errors = new Array();
if (typeof this.getTemplateName() === "undefined") {
errors.push('templateName');
}
for (var i = 0; i < arguments.length; i++) {
if (!this.options.hasOwnProperty(arguments[i])) {
errors.push(arguments[i]);
}
}
if (errors.length > 0) {
throw new Exception("Required property(s) not found:" + errors.join(', ') + " in " + this.toString());
}
};
AbstractComponent.prototype.getElement = function() {
'use strict';
if(!this.options.updated) {
this.updateOptions();
}
return new AbstractView(this.options).render().$el;
};
AbstractComponent.prototype.updateOptions = function() {
this.options.updated = true;
return true;
};
AbstractComponent.prototype.getHtml = function() {
return this.getElement().html();
};
AbstractComponent.prototype.setOptions = function(options, defaultOptions) {
this.options = _.defaults(options, defaultOptions);
};
AbstractComponent.prototype.toString = function() {
return "Component" + this.getTemplateName() + "[id=" + this.options.id + "]";
};
jQuery extend is for moving properties from one (or more) object(s) to another object.
$.extend({}, {
foo: 10,
bar: 20
});
You should use prototypal inheritance isntead
function Button(options) {
'use strict';
var defaultOptions = {
templateName: '#button-tmpl',
title: "Label goes here",
type: "primary",
size: "medium",
disabled: null,
autosave: null,
href: null,
onclick: null
};
//debugger
//this.setOptions is not available here
this.setOptions(options, defaultOptions);
this.checkRequiredKeys('title');
return this;
};
Button.prototype = new AbstractComponent;
I've a fair amount of experience with JavaScript, and for this new project I'm on (cms for blog with notions of profitability) I thought I'd step it up and write the JavaScript in an MVC fashion. I've been using a bit of backbone and underscore, but it isn't clicking mentally. any way, I've written a bit of code to handle some events/effects but it just doesn't work. If anyone could sort me out I'd really appreciate it.
// Semi Perfect grade 0 JS - Golden age
//partial View Objects | Events
var pshare_dock = {
actor: $("#share_dock"),
drag: function () {
this.actor.draggable();
}
}
pshare_dock.expand = function () {
this.actor.dblclick(function () {
$(this).toggleClass("share_close");
});
}
var pmenu = {
hover: function () {
$("ul.drop li.drop").hover(function () {
$(this).find('ul').fadeIn(1);
}, function () {
$(this).find('ul').hide();
})
},
navigate: function () {
$("a.ajx").click(function (e) {
var link;
var container = $("#content_pane");
e.preventDefault();
link = $(this).attr("href") + "#content_pane";
container.load(link);
})
}
}
var pcontent_pane = {}
var ppost = {}
var pdatabase_entry = {}
//Views
var Homepage = function () {
this.share_dock = function () {
new pshare_dock();
}
this.menu = function () {
new pmenu();
}
this.content_pane = function () {
new pcontent_pane();
}
this.posts = function () {
new ppost();
}
}
//Controller
var GoldenAgeRouter = Backbone.Router.extend({
routes: {
"!/": "defaultRoute",
"*actions": "defaultRoute"
},
defaultRoute: function (actions) {
var homeView = function () {
new Homepage();
}
}
})
$(document).ready(function () {
var Golden_age = function () {
new Homepage();
}
})
the question is essentially what all is wrong with this?
You're wrapping your instantiations in an anonymous function but not invoking them:
var Golden_age = new Homepage(); // Invoked.
var Golden_age = function(){ new Homepage(); } // Stored function, not invoked.