Databases
StackOverflow2013
Postsdbo
PORemoving Self From observableArray in knockoutJS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORemoving Self From observableArray in knockoutJS
    primarykey
    data
    text
    <p>I'm using knockoutjs to create a treeview of divisions. Next to each node will be three buttons: 1)New child(applies to the node it's next to 2) Remove(This removes the node it's next to, and 3) Copy, which copies the node and all it's children and creates a new node under the parent.</p> <p>I've got the New button down, and now I'm working on the remove button. I can't seem to get it to work, and instead of doing anything useful it just refreshes the entire page. Here's the code:</p> <p>View:</p> <pre><code>&lt;h2&gt;Skill &amp; Weight Divisions&lt;/h2&gt; &lt;span data-bind="text: tournamentname"&gt;&lt;/span&gt;&lt;button data-bind="click: addDivision"&gt;&lt;img src="new.png"/&gt;&lt;/button&gt; &lt;ul data-bind="template: { name: 'divisionTemplate', foreach: divisions }"&gt;&lt;/ul&gt; </code></pre> <p>Template:</p> <pre><code>&lt;script id="divisionTemplate" type="text/html"&gt; &lt;li data-bind="style: {'background-color':color}"&gt; &lt;input data-bind="value: name"/&gt;&lt;button data-bind="click: addDivision"&gt;&lt;img src="new.png"/&gt;&lt;/button&gt;&lt;button data-bind="click: $parent.removeDivision"&gt;&lt;img src="remove.png"/&gt;&lt;/button&gt;&lt;button data-bind="click: $parent.copyDivision"&gt;&lt;img src="copy.png"/&gt;&lt;/button&gt; &lt;ul data-bind="template: { 'if': children, name: 'divisionTemplate', foreach: children }"&gt;&lt;/ul&gt; &lt;/li&gt; &lt;/script&gt; </code></pre> <p>View Model and appropriate helper function:</p> <pre><code>function division(id, name, filter, children) { this.id = ko.observable(id); this.name = ko.observable(name); this.filter = ko.observable(filter) if(children){ this.children = ko.observableArray(children); }else{ this.children = ko.observableArray(); } this.addDivision = function(){ this.children.push(new division("", "", "")); } this.removeDivision = function(division){ this.children.remove(division); } this.copyDivision = function(division){ this.children.push(division); } this.color = randColor(); }; function tournamentViewModel(){ var self= this; self.tournamentname = ko.observable('NO NAME YET'); self.districts = ko.observableArray([new district('Provo',1),new district('Salt Lake City',2),new district('St. George',3)]); self.district = ko.observable(self.districts()[0]); self.regions = ko.observableArray([new region('Utah',1),new region('Idaho',2)]); self.region = ko.observable(self.regions()[0]); self.location = ko.observable('WHEREVER YOU WANT'); self.eventdate = ko.observable(''); self.startTime = ko.observable(''); self.image = ko.observable(); self.flyer = ko.computed(function(){ var flyerHTML = '&lt;span style="text-align:center;padding:10px;"&gt;&lt;h1&gt;'+self.tournamentname()+'&lt;/h1&gt;&lt;img src="'+self.image()+'"/&gt;&lt;br/&gt;'; flyerHTML += 'District: ' + self.district().districtName + ' Region: ' + self.region().regionName+'&lt;br&gt;&lt;br&gt;'; flyerHTML += '&lt;h2&gt;WHEN: '+self.eventdate()+' '+self.startTime()+'&lt;/h2&gt;'; flyerHTML += '&lt;h2&gt;WHERE: '+self.location()+'&lt;/h2&gt;'; flyerHTML += '&lt;img src="http://maps.googleapis.com/maps/api/staticmap?center='+encodeURI(self.location())+'&amp;zoom=12&amp;size=200x200&amp;markers=color:blue%7Clabel:S%7C'+encodeURI(self.location())+'&amp;maptype=roadmap&amp;sensor=false"/&gt;'; return flyerHTML; }, self); self.clearImage = function(){ self.image(''); } self.tournamentID = ko.computed(function(){return 't_'+self.district()+'_'+self.region()+'_'+self.eventdate()}, self); self.pricingStructures = ko.observableArray([new pricingStructure(3,2.99), new pricingStructure(1,1.99)]); self.removePricingStructure = function(pricingStructure){ self.pricingStructures.remove(pricingStructure); } self.addPricingStructure = function(){ self.pricingStructures.push(new pricingStructure("", "")); } self.promoCodes = ko.observableArray(); self.promoTypes = ['%','$']; self.removePromoCode = function(promoCode){ self.promoCodes.remove(promoCode); } self.addPromoCode = function(){ self.promoCodes.push(new promoCode("", "")); } self.divisions = ko.observableArray([new division(1, "Men","",[new division(2,"Gi"), new division(3,"No-Gi")])]); self.addDivision = function(){ self.divisions.push(new division("", "", "")); } } ko.applyBindings(new tournamentViewModel()); </code></pre> <p>My main question in all of this is this: Is there a way to access an object's parent array in order to remove that very object from the array? Thanks in advance for the help!</p> <p>EDIT: Here's a jsFiddle: <a href="http://jsfiddle.net/eqY7Z/" rel="noreferrer">http://jsfiddle.net/eqY7Z/</a> However it doesn't seem to be working at all there. If you guys can't get it going, I'll include the link to my site where it's being hosted so you can take a good look at it.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USFrank B
    1. USFrank B
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORemoving Self From observableArray in knockoutJS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORemoving Self From observableArray in knockoutJS
      1. USrlcrews
      1. VTFavorite
    3. VO
      singulars
      1. PORemoving Self From observableArray in knockoutJS
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAlso I'd like to add that at some point I did get the remove working, but for only two levels down. Anything deeper didn't work. If I can remember the code that worked there, I'll let you know.
      singulars
      1. PORemoving Self From observableArray in knockoutJS
      1. USFrank B
    2. COcan you create a jsfiddle for this?
      singulars
      1. PORemoving Self From observableArray in knockoutJS
      1. USHashCoder
    3. COI have to go to work right now, but on my break I'll put one up.
      singulars
      1. PORemoving Self From observableArray in knockoutJS
      1. USFrank B
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload