How to splice ko.computeds

Question

I got these two ko.computeds lists that I want to drag and drop among, but also moved with pushbuttons to remove an add to lists.

However I cannot make them work with both the dragndrop and the pushbutton functionality.

For the drag and drop I use Ryan Niemeyers excellent sortable library.

I guess I need to make my computeds writable, but this is where I get stuck and can´t seem to get rid of the error "splice is not a function" for the computed.

Hence the sorting by drag and drops fails.

This is one of the computers:

         this.availableTexts = ko.computed({
            read: function(){
               return ko.utils.arrayFilter(self.texts(), function(text) {
               return text.sceneID() === null;
            })
          },
          write: function(value){
            return value;
          },
          owner: this
        });

Full fiddle: http://jsfiddle.net/AsleG/yLvrp7zz/

user3297291 · Answer 1 · 2016-06-27T08:02:39.073

1

Niemeyer's knockout-sortable library works with splice internally to sort an array of items (source). I believe it simply won't work on a computed, even if it returns an array and has a correct write method...

I'd suggest to use the visible binding to hide individual items. You'll have to expose projectID or map your items to include a computed like so:

var projectID = 1;
self.allScenes = ko.observableArray(scenes.map(function(scene) {
  return Object.assign({}, scene, {
    isVisible: ko.computed(function() { 
      return scene.projectID === projectID;
  });
});

Alternatively, in viewmodel:

self.projectId = 1;

in HTML:

<li data-bind="visible: projectID === $parent.projectId"> ... </li>

edited Jun 27 '16 at 08:02

answered Jun 27 '16 at 07:56

user3297291

22,592
4
29
45

That´s a very good suggestion for a workaround, @user3297291. However I get back to the fact that the texts I am binding against "visible" statement still is a computed since it is filtered on projectID. I could of course add the projectID to the visible, but that would potentially load lots of text in my view. Surely there must be a way to work around this with subscribe-function? – Asle G Jun 29 '16 at 18:17
1

You may use `if` binding on virtual element instead of `visible` (`
...

Tarwirdur Turon

Jun 29 '16 at 21:54

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

See: https://stackoverflow.com/a/16464935/4024558

You can use observableArray.filter instead of computed in your case.

Suddenly I can't fork your fiddle. So you can replace your js with this http://pastebin.com/jjNQ39nJ and it will work.

edited May 23 '17 at 11:52

Community

1
1

answered Jun 27 '16 at 22:35

Tarwirdur Turon

751
5
17

Thanks @Tarwirdur Turon! This is pretty close. However I rely on static variables for the projectID and/or sceneID. How would a filter with two inputs look, the second being the value (projectID/sceneID) checked against? Important notice. The value of projectID/sceneID would have to be observables themselves as these are input into the selection. – Asle G Jun 28 '16 at 17:16
1

@AsleG I see here error: `... if (!scene) {return [];} ...`. It is in ko.utils.arrayFilter predicate. This function must return boolean value. I suppose, you mean there `... if (!scene) {return false;} ...`. If you think that something else is working wrong - say what are you doing and what do you expect. – Tarwirdur Turon Jun 28 '16 at 23:04
The predicate is a ko.utils.arrayFilter returning array elements isn´t it? I need the filter to return an empty array when scene is not defined, else I will have an error on the initialization of the view. This is a general problem for me. When a scene not is selected the view is failing. – Asle G Jun 29 '16 at 18:11
1

@AsleG No. `predicate` is a function that used as second argument of arrayFilter. It calls on each element of array and must return `true` (include element from filtered array) or `false` (exclude element from filtered array). If you write `return [];` it will be assimilated to `true`. (check it with `if([]) {console.log("true");} else {console.log("false")};`); – Tarwirdur Turon Jun 29 '16 at 21:50
Thanks, @Tarwirdur Turon! But how do I get the filter function to return an empty array in case the matching condition is undefined? – Asle G Jul 01 '16 at 10:36
@AsleG this function calls on **each** element. So if you write `if (!scene) return false;` it means `false` for all element. So result will be empty observable array. Check it on your fiddle. – Tarwirdur Turon Jul 01 '16 at 12:04

How to splice ko.computeds

2 Answers2