CODEWITHSUNDEEP
javascriptdata-bindingextjs5
johnjg12
johnjg12

Reputation: 1103

Is it possible to dynamically update a bind in extjs5?

I am trying change a bind dynamically in extjs5 and I can't quite figure out how or if this is even possible or if I'm just going about this the wrong way entirely. I'll try to explain what I am trying to do. I have a textarea defined like:

id: 'final-view',
xtype: 'textareafield',
editable: false,
bind:{
  value: '{r.options}'
}

In my viewModel I have:

data: {
  r:{
    options: {}
  }
}

The page is layed out like:

textarea
"Add Option" button
option 1
...
option n

I have a button "Add Option" which adds a combo box to the page with a store of options and they can then select something from the drop down and type extra content into the combo. When the combo is created I have a variable that increments and this number is used to create unique ids:

var new_opt = 'r.options.opt_' + cnt;

This is used to add an element to the r.options object as follows:

viewModel.set(new_opt, '');

Each combo created has a bind defined like:

bind: {
  value: '{r.options.opt_' + this.id.substr(14) + '}'
}

where "this.id.substr(14)" is my cnt variable i.e. 1. So the value bind for the first option is "{r.options.opt_1}". The end goal is to have all of the content from each combo box concatenated and bound to the textarea. What I want to do is dynamically update the bind for the textareafield when an option is added so that way when any combo box is typed into it will update the final view. So for example if there were 2 options the data object in the view model would look like:

data: {
  r:{
    options: {opt_1: 'value1', opt_2: 'value2'}
  }
}

So with this I would want to change my bind to be as follows:

id: 'final-view',
xtype: 'textareafield',
editable: false,
bind:{
  value: '{r.options.opt_1} {r.options.opt_2}'
}

and in the textarea you would see the content "value1 value2". What I want to avoid is repopulating the textarea from scratch each time by looping through all of the elements in the "r.options" object and changing the value, so I figured if there was a way to update the bind for the value field this would be more efficient. Any help or guidance would be appreciated, I'm still fairly new to the MVVM paradigm.

Upvotes: 0

Views: 1766

Answers (2)

Dreculah
Dreculah

Reputation: 96

You don't need to set the bind explicitly.

viewModel.setData('newValue') will get the job done.

Also, are you storing that data anywhere? If so, maybe you need to bind it to a store.model field value, then any other view that shares that model instance will be automatically updated when the data is changed. If that's the case, you'd likely have the textarea bound to '{model.field}' and the rest just happens automatically.

I hope this helps.

Upvotes: 1

Saki
Saki

Reputation: 5856

You are most likely looking for setBind() method.

Just my 2 cents: the whole thing looks overcomplicated to me and even if you find a way how to make it working, consider simplifying it.

Upvotes: 3

Related Questions