Develop Reference

Cannot add item to observableArray

This should be a pretty trivial question, but it's getting me crazy!
I't like step 1 of the tutorial, but I can't it to work.... so this is my code:
/* Model definition */
var PrivateSalesMenuModel = function () {
var self = this;
this.privateSales = ko.observableArray();
this.addPrivateSale = function (privateSale) {
var newPs = new PrivateSaleMenuItem(privateSale);
self.privateSales.push(newPs);
};
};
var PrivateSaleMenuItem = function (ps) {
this.title = ps.Description;
this.hasActual = ps.HasActual;
this.hasSale = ps.HasSale;
this.listaId = ps.ListaId;
this.isSelected = false;
};
/* end model definition*/
var privateSalesMenuModel = new PrivateSalesMenuModel();
ko.applyBindings(privateSalesMenuModel);
Pretty simple... I have an object that represent my model, that is a collection of others objects, called PrivateSaleMenuItem.
Problem is that addPrivateSale didn't work as expected. Somewhere in the code I do
privateSalesMenuModel.addPrivateSale(ps);
where ps is an object created by other JavaScript functions... anyway is exactaly the object I need in the constructor of PrivateSaleMenuItem, so it's consistency is not the problem.
The problem seems o be that self.privateSales.push(newPs); doesn't work... after that inocation, the number of privateSalesMenuModel.privateSales is still 0.
Why is that?
Edited
I put toghether an example in jsFiddle with this same exact code, and it works fine, so I suspect something in my page make the push method of observableArray stop working... how can I find out what it is?
ops... the link of jsfiddle http://jsfiddle.net/YBHf5/

It looks like you are mixing this and self in your code here:
var PrivateSalesMenuModel = function () {
var self = this;
this.privateSales = ko.observableArray();
this.addPrivateSale = function (privateSale) {
var newPs = new PrivateSaleMenuItem(privateSale);
self.privateSales.push(newPs);
};
};
Changing them to all use self fixes it like this:
var PrivateSalesMenuModel = function () {
var self = this;
self.privateSales = ko.observableArray();
self.addPrivateSale = function (privateSale) {
var newPs = new PrivateSaleMenuItem(privateSale);
self.privateSales.push(newPs);
};
};
Please see working fiddle here:
http://jsfiddle.net/YBHf5/1/

Problem solved.... it was a trivial problem indeeed, with a trivial solution: I just needed to push the external script declaration at the end of the page.
I had the script (in which the code provided on the question is present) at the top of the page, inside the body, but above anything else.
Just putting the script reference at the end of the body and everything works as expected again.
Sorry for wasting your time... but this little issue is very hard to find out, 'cause the reason is not clear at all while debugging

Access property of model on change event in backbone.js

Just started Backbone.js and following tuorials at backbonejs.org.
Here is what I wanted to achieve. I created a model which asks for width and saves it. Now I have used listenTo with object I have created as below on model to read the changed property value. It triggered the change event, but, I always get undefined for width. Code is below.
var mod = Backbone.Model.extend({
askColor:function() {
var w = prompt("Enter width");
this.set({ width:w})
}
});
var model = new mod();
model.set({width:1234})
var obj = {};
_.extend(obj,Backbone.Events);
obj.listenTo(model, 'change', function() {
alert("width = "+model.width)
})
model.askColor();
I really don't know what am I missing in the code or am I doing wrong? Please help out a beginner....

The width attribute is actually stored inside model.attributes. You should use .get() to get the width attribute.
obj.listenTo(model, 'change', function() {
alert("width = "+model.get('width'))
})

You can also use model.attributes.width alongwith model.get('width').
Also following is the best tutorial I found when I started to learn Backbone.js:
http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/

Understanding discrepancy in Javascript Design Patterns

I picked up this book a while ago to help understand how to apply my knowledge of design patterns in Java to web developement. However, I've come across an odd discrepancy in the introduction.
The authors state that the following code defines a class that lets the user create animation objects:
//Anim class
var Anim = function(){ /*code here*/ };
Anim.prototype.start = function(){ /*start code here*/ };
Anim.prototype.stop = function() { /*stop code here */};
//create a new Anim object and call the start method
var newAnim = new Anim();
newAnim.start();
I tried something similar with my app.
//Nucleus class and addLink function
var Nucleus = function(){
this.location=null;
this.links = [];
}
//revamp object and add to link array
Nucleus.prototype.addLink = function(marker){ }
The above class was instanciated as a global variable via
var curSpot = new Nucleus();
However, Firebug threw an error at page load stating that Nucleus is not a constructor, and Javascript button handling functionality was disabled. The problem was solved by changing the Nucleus definition to
function Nucleus(){ /*instance members here*/ }
and now the OO functionality works. Why does the latter example work, but the book's example throws an error?
At the request of Ryan Lynch, more code posted. This is the only code where 1curStop is used. As its a global variable,
//global variables
var curStop = new Nucleus();
function showMarkers(){
//unreleated code here
var tourList = [];
//handles a double click event, adds current marker to list and creates one
//if not null. Otherwise, create a new Nucleus object and add current location
(function(marker){
google.maps.event.addListener(marker, 'dblclick', function(){
if (curStop != null){
tourList.push(curStop);
curStop = null;
} else {
curStop = new Nucleus();
curStop.addLocation(marker);
}
}); //end listener
})(marker);
}
function postTour(){
//need CurStop to be a global variable, since only new double-click events add the
//object to the tourList array. This makes sure that all objects are saved on
//button click
tourList.push(curStop);
}

JavaScript access elements from custom object

This must be a very stupid question, but I just can't get it to work.
I'm creating my own UIKit for iOS. (Website-kit which will allow iPhone-like interfaces).
But, I'm trying to create a JavaScript library, which can be used to change several elements of the document. For instance, set a custom background colour when the document loads.
I'm trying to do that with object-orientated JavaScript. Like this:
var UI = new Interface();
UI.setBackground("#000");
How could I achieve this?
(So the custom "UI" Object, and (an example) on how to change the background color of the document, from INSIDE the object.)

You can save a reference to the DOM inside the JS object and rewrite it as needed.
function Interface() {
this.setBackground = function (color) {
this.pointTo.style.background = color;
};
this.pointTo = document.body;
}
You can initialize this by:
var UI = new Interface();
UI.pointTo = document.getElementById('some_id');
UI.setBackground("#000");
// Set another style, on a different element
UI.pointTo = document.getElementById('some_other_id');
UI.setBackground("#FFF");
This is a simple implementation and need to be allot smarter, but it should do the job.
Edit:
Made a mistake in original posting, and fixed erroneous code. Also made an example: http://jsfiddle.net/HpW3E/

Like silverstrike's code, but you can pass the target object in the interface constructor to don't get trouble in the future.
function Interface(target) {
target = target || document.body;
this.setBackground = function (color) {
target.style.background = color || 'white';
};
}
Ok now you can do this:
var UI = new Interface(document.body);
UI.setBackground("#000");
or even in somecases that you are applying the interface in global scope !ONLY!:
var UI = new Interface(this.body);
UI.setBackground("#000");
Also will work as this:
var UI = new Interface();
UI.setBackground("#000");

Here is a very simple approach
// define the object
var Interface = function () {
var interface = document.getElementById("interface"); // just an example
// your new methods
this.setBackground = function (color) {
interface.style.backgroundColor = color;
}
// rest of your code
}
now you can make use of it
var UI = new Interface();
UI.setBackground("#000");

Functional object basics. How to go beyond simple containers?

On the upside I'm kinda bright, on the downside I'm wracked with ADD. If I have a simple example, that fits with what I already understand, I get it. I hope someone here can help me get it.
I've got a page that, on an interval, polls a server, processes the data, stores it in an object, and displays it in a div. It is using global variables, and outputing to a div defined in my html. I have to get it into an object so I can create multiple instances, pointed at different servers, and managing their data seperately.
My code is basically structured like this...
HTML...
<div id="server_output" class="data_div"></div>
JavaScript...
// globals
var server_url = "http://some.net/address?client=Some+Client";
var data = new Object();
var since_record_id;
var interval_id;
// window onload
window.onload(){
getRecent();
interval_id = setInterval(function(){
pollForNew();
}, 300000);
}
function getRecent(){
var url = server_url + '&recent=20';
// do stuff that relies on globals
// and literal reference to "server_output" div.
}
function pollForNew(){
var url = server_url + '&since_record_id=' + since_record_id;
// again dealing with globals and "server_output".
}
How would I go about formatting that into an object with the globals defined as attributes, and member functions(?) Preferably one that builds its own output div on creation, and returns a reference to it. So I could do something like...
dataOne = new MyDataDiv('http://address/?client');
dataOne.style.left = "30px";
dataTwo = new MyDataDiv('http://different/?client');
dataTwo.style.left = "500px";
My code is actually much more convoluted than this, but I think if I could understand this, I could apply it to what I've already got. If there is anything I've asked for that just isn't possible please tell me. I intend to figure this out, and will. Just typing out the question has helped my ADD addled mind get a better handle on what I'm actually trying to do.
As always... Any help is help.
Thanks
Skip
UPDATE:
I've already got this...
$("body").prepend("<div>text</div>");
this.test = document.body.firstChild;
this.test.style.backgroundColor = "blue";
That's a div created in code, and a reference that can be returned. Stick it in a function, it works.
UPDATE AGAIN:
I've got draggable popups created and manipulated as objects with one prototype function. Here's the fiddle. That's my first fiddle! The popups are key to my project, and from what I've learned the data functionality will come easy.

This is pretty close:
// globals
var pairs = {
{ div : 'div1', url : 'http://some.net/address?client=Some+Client' } ,
{ div : 'div2', url : 'http://some.net/otheraddress?client=Some+Client' } ,
};
var since_record_id; //?? not sure what this is
var intervals = [];
// window onload
window.onload(){ // I don't think this is gonna work
for(var i; i<pairs.length; i++) {
getRecent(pairs[i]);
intervals.push(setInterval(function(){
pollForNew(map[i]);
}, 300000));
}
}
function getRecent(map){
var url = map.url + '&recent=20';
// do stuff here to retrieve the resource
var content = loadResoucrce(url); // must define this
var elt = document.getElementById(map.div);
elt.innerHTML = content;
}
function pollForNew(map){
var url = map.url + '&since_record_id=' + since_record_id;
var content = loadResoucrce(url); // returns an html fragment
var elt = document.getElementById(map.div);
elt.innerHTML = content;
}
and the html obviously needs two divs:
<div id='div1' class='data_div'></div>
<div id='div2' class='data_div'></div>
Your 'window.onload` - I don't think that's gonna work, but maybe you have it set up correctly and didn't want to bother putting in all the code.
About my suggested code - it defines an array in the global scope, an array of objects. Each object is a map, a dictionary if you like. These are the params for each div. It supplies the div id, and the url stub. If you have other params that vary according to div, put them in the map.
Then, call getRecent() once for each map object. Inside the function you can unwrap the map object and get at its parameters.
You also want to set up that interval within the loop, using the same parameterization. I myself would prefer to use setTimeout(), but that's just me.
You need to supply the loadResource() function that accepts a URL (string) and returns the HTML available at that URL.
This solves the problem of modularity, but it is not "an object" or class-based approach to the problem. I'm not sure why you'd want one with such a simple task. Here's a crack an an object that does what you want:
(function() {
var getRecent = function(url, div){
url = url + '&recent=20';
// do stuff here to retrieve the resource
var content = loadResoucrce(url); // must define this
var elt = document.getElementById(div);
elt.innerHTML = content;
}
var pollForNew = function(url, div){
url = url + '&since_record_id=' + since_record_id;
var content = loadResoucrce(url); // returns an html fragment
var elt = document.getElementById(div);
elt.innerHTML = content;
}
UpdatingDataDiv = function(map) {
if (! (this instanceof arguments.callee) ) {
var error = new Error("you must use new to instantiate this class");
error.source = "UpdatingDataDiv";
throw error;
}
this.url = map.url;
this.div = map.div;
this.interval = map.interval || 30000; // default 30s
var self = this;
getRecent(this.url, this.div);
this.intervalId = setInterval(function(){
pollForNew(self.url, self.div);
}, this.interval);
};
UpdatingDataDiv.prototype.cancel = function() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})();
var d1= new UpdatingDataDiv('div1','http://some.net/address?client=Some+Client');
var d2= new UpdatingDataDiv('div2','http://some.net/otheraddress?client=Some+Client');
...
d1.cancel();
But there's not a lot you can do with d1 and d2. You can invoke cancel() to stop the updating. I guess you could add more functions to extend its capability.

OK, figured out what I needed. It's pretty straight forward.
First off disregard window.onload, the object is defined as a function and when you instantiate a new object it runs the function. Do your setup in the function.
Second, for global variables that you wish to make local to your object, simply define them as this.variable_name; within the object. Those variables are visible throughout the object, and its member functions.
Third, define your member functions as object.prototype.function = function(){};
Fourth, for my case, the object function should return this; This allows regular program flow to examine the variables of the object using dot notation.
This is the answer I was looking for. It takes my non-functional example code, and repackages it as an object...
function ServerObject(url){
// global to the object
this.server_url = url;
this.data = new Object();
this.since_record_id;
this.interval_id;
// do the onload functions
this.getRecent();
this.interval_id = setInterval(function(){
this.pollForNew();
}, 300000);
// do other stuff to setup the object
return this;
}
// define the getRecent function
ServerObject.prototype.getRecent = function(){
// do getRecent(); stuff
// reference object variables as this.variable;
}
// same for pollForNew();
ServerObject.prototype.pollForNew = function(){
// do pollForNew(); stuff here.
// reference object variables as this.variable;
}
Then in your program flow you do something like...
var server = new ServerObject("http://some.net/address");
server.variable = newValue; // access object variables
I mentioned the ADD in the first post. I'm smart enough to know how complex objects can be, and when I look for examples and explanations they expose certain layers of those complexities that cause my mind to just swim. It is difficult to drill down to the simple rules that get you started on the ground floor. What's the scope of 'this'? Sure I'll figure that out someday, but the simple truth is, you gotta reference 'this'.
Thanks
I wish I had more to offer.
Skip