Splice not working on observableArray?

[Shripad K]

I have a view model defined like so (I'm using Closure templates).
Its actually quite simple. I have two Closure templates. One for just
appending a new node to div#main. The other one for a inputbox which
has a placeholder value.

The subscribe event on views.items is fired only for "push" and not
for "splice".
I have pasted only a gist of the code (modified to make it simpler to
debug):

views.items = ko.observableArray();
views.placeholder = ko.observable('Click me...');
views.addItem = function(event) {
if(this.placeholder() !== 'Click me...') {
views.items.push(this.placeholder());
var placeholder =
goog.dom.htmlToDocumentFragment(Template.placeholder({'id':
views.items().length}));
$('#main').append(placeholder);
ko.applyBindings(views, $(site).get(0));
this.placeholder('Click me...');
}
};
views.removeItem = function(event) {
// for those of you who are confused, here `this` is bound to
the ID of the placeholder. Please see the template code.
var placeholder = $('#placeholder_'+this);
var index = $('.placeholders').index(placeholder);
$(placeholder).remove();
views.items().splice(index, 1);
}
views.items.subscribe(function(arr) {
// The subscribe event is triggered only on "push" and not on
"splice".
console.log(arr.length);
});

/**Now for the template code (Template):*/

{namespace Template}

/** main */
{template .main}
<div id='main-ribbon'>
<form data-bind='submit: addItem'>
<input data-bind='value: placeholder' type='text' value=''/>
<button type='submit' data-bind='click: addItem'>Add</button>
</form>
</div>
<div id='main'>
</div>
{/template}

/**
* Placeholder
* @param id
*/
{template .placeholder}
<div id="placeholder_{$id}" class='placeholders' data-bind='click:
removeItem.bind({$id})'>
This is placeholder {$id}.
</div>
{/template}

Any help will be greatly appreciated!

Thanks,
Shripad K.

[Shripad K]

On Sep 17, 7:26 pm, Shripad K <assortmentofso...@gmail.com> wrote:
> I have a view model defined like so (I'm using Closure templates).
> Its actually quite simple. I have two Closure templates. One for just
> appending a new node to div#main. The other one for a inputbox which
> has a placeholder value.
>
> The subscribe event on views.items is fired only for "push" and not
> for "splice".
> I have pasted only a gist of the code (modified to make it simpler to
> debug):
>
> views.items = ko.observableArray();
> views.placeholder = ko.observable('Click me...');
> views.addItem = function(event) {
>         if(this.placeholder() !== 'Click me...') {
>                 views.items.push(this.placeholder());
>                 var placeholder =
> goog.dom.htmlToDocumentFragment(Template.placeholder({'id':
> views.items().length}));
>                 $('#main').append(placeholder);
>                 ko.applyBindings(views, $(site).get(0));

The above should be : ko.applyBindings(views, $(placeholder).get(0));
Sorry for the typo.

[rpn]

Hello-
You need to call splice directly off of your observableArray instead of just on the underlying array. So,

views.items.splice(index, 1)

[Shripad K]

Pah! My bad! Sorry I got it to work. It should be views.items.splice() and not views.items().splice()