# Data binding multi select with data transformed

**URL:** <https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554>\
**Category:** CanJS\
**Created:** [February 17, 2017, 6:55am UTC](https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554 "2017-02-17T06:55:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nithanaroy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nithanaroy/32/225_2.png) [@Nithanaroy](https://forums.bitovi.com/u/Nithanaroy)\
**Post date:** [February 17, 2017, 6:55am UTC](https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554/1 "2017-02-17T06:55:09Z")

</div>

In ViewModel, `options` object is set from server and is in a format that is not friendly to data bind on UI  
And the server expects the updated `options` (by user selections on UI) to be also in the same format.

`optionsUI` object of the ViewModel is a transformation that is easier to bind on UI. `optionsUI.get` transforms server format to UI format and it works fine. The `optionsUI.set` should update `options` to be saved on server which _does not work_.

**Problem 1** : The `optionsUI.set` function is not triggered when user changes selections on UI

**Problem 2** : And if thats fixed, I am not sure if that will lead to infinite updates between options and optionsUI. Then what is a good way to achieve this?

I was unable to get JSBin to include DefineMap correctly though `can.map.define.js` script is loaded in HTML.

http://jsbin.com/secexek/embed?html,js,output

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [February 17, 2017, 3:02pm UTC](https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554/2 "2017-02-17T15:02:10Z")

</div>

I only had a second to look over the jsbin, but:

```auto
options: {
    value: [
      {
        key: "select1",
        value: ["one"]
      }, 
      {
        key: "select2",
        value: ["two", "three"]
      }
    ],
    "set": function ( newVal ) {
      this.optionsUI = newVal;
      return newVal;
    }
  },

```

should be

```auto
options: {
    value: function(){
      return [
        {
          key: "select1",
          value: ["one"]
        }, 
        {
          key: "select2",
          value: ["two", "three"]
        }
      ];
    },
    "set": function ( newVal ) {
      this.optionsUI = newVal;
      return newVal;
    }
  },

```

This makes sure the same object isn’t shared by every single instance.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [February 17, 2017, 3:05pm UTC](https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554/3 "2017-02-17T15:05:06Z")

</div>

Created an issue to warn people about the `value` thing: [https://github.com/canjs/canjs/issues/3012](https://github.com/canjs/canjs/issues/3012)

And an issue about better warnings when bindings can’t find data: [https://github.com/canjs/can-stache-bindings/issues/136](https://github.com/canjs/can-stache-bindings/issues/136)

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [February 17, 2017, 3:11pm UTC](https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554/4 "2017-02-17T15:11:23Z")

</div>

The issue here is that the select is cross bound to `optionsUI.select1`.

That value doesn’t exist. In CanJS 3.0, components don’t leak scope. Meaning there’s no options available because it’s not passed.

Setting `leakScope:true` fixes that problem but creates a stack overflow. Not sure why…

The other thing is you could pass optionsUI to homepage. Passing it looks a little weird because attribute names are case insensitive `<home-page {options-u-i}="optionsUI"/>`

---

<div class="post-metadata">

**Author:** ![Nithanaroy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nithanaroy/32/225_2.png) [@Nithanaroy](https://forums.bitovi.com/u/Nithanaroy)\
**Post date:** [February 17, 2017, 5:21pm UTC](https://forums.bitovi.com/t/data-binding-multi-select-with-data-transformed/554/5 "2017-02-17T17:21:00Z")

</div>

Thanks @justinbmeyer. Fixed the JSBin by making value as a function and passing correct arguments. However, whenever I change my selections on UI, the setter is not triggered. [http://jsbin.com/secexek/edit?html,js,output](http://jsbin.com/secexek/edit?html,js,output)

This was my initial dilemma that I am unable to get data binding working. So my three problems are:

- Setter in JS pane on line 48 is not called when user changes selections

- In JS pane, if I code as per line 49, results in STACK OVERFLOW. I understand why its happening, but want to avoid it and solve for the use case I initially explained in my question.

- In HTML pane, line 22 does not show problem values

Feel free to update the Bin if thats allowed 😃