StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <code>remove</code> function of an observableArray loops through the array and deletes any items that match the value passed to it. In your case, you are just dealing with strings and it will see that all of the new ones (with no value) will match "".</p> <p>There are a couple ways to handle it:</p> <ul> <li><p>you can deal with objects instead of just strings like <code>{ value: ko.observable("") }</code>. Then, when you pass <code>$data</code> it will only delete the actual item that matches that object reference. If your value is not observable and is the data itself (not a property), then your writes won't actually make it back to your view model.</p></li> <li><p>if that does not work for your scenario, then you could delete items based on the index (<code>$index</code>) using splice. </p></li> </ul> <p>I would probably do it like: <a href="http://jsfiddle.net/rniemeyer/N3JaW/">http://jsfiddle.net/rniemeyer/N3JaW/</a></p> <p>Also note that the <code>event</code> (<code>click</code> is a wrapper to <code>event</code>) binding will pass the current data as the first argument to the handler, so you can simplify your binding to <code>click: $parent.removeItem</code>. </p> <p><strong>Update</strong>: here are several ways that you can control how your object is converted to JSON:</p> <ul> <li><p><code>ko.toJSON</code> passes its 2nd and 3rd arguments on to <code>JSON.stringify</code>. The second arg let's you run a function to potentially replace values as described <a href="https://developer.mozilla.org/en-US/docs/Using_native_JSON#The_replacer_parameter">here</a>. Here is a sample that checks to see if the key is a number (array item) and it has a <code>value</code> property. If so, it just returns the string rather than the object. <a href="http://jsfiddle.net/rniemeyer/N3JaW/1/">http://jsfiddle.net/rniemeyer/N3JaW/1/</a></p></li> <li><p>If you use a constructor function for your objects, then you can override the <code>toJSON</code> function as described <a href="http://www.knockmeout.net/2011/04/controlling-how-object-is-converted-to.html">here</a>. Here is your sample with this functionality: <a href="http://jsfiddle.net/rniemeyer/N3JaW/2/">http://jsfiddle.net/rniemeyer/N3JaW/2/</a></p></li> <li><p>Another technique that can be used is to maintain a computed observable that has the "good" value. Here is sample: <a href="http://jsfiddle.net/rniemeyer/N3JaW/3/">http://jsfiddle.net/rniemeyer/N3JaW/3/</a>. In this one <code>Items</code> is a computed observable that returns the clean value. <code>Items.asObjects</code> contains the object version of your values. When converted to JSON, the <code>asObjects</code> part is naturally dropped when <code>Items</code> is converted to JSON. If you only need this "good" array when converting to JSON, then the other options are better for performance (they only are calculated when you want to send it).</p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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