CODEWITHSUNDEEP
knockout.jsconcatenation
SKB
SKB

Reputation: 179

Concatenate values in KnockoutJS

I have a dropdown and a textarea. When I choose a value in the dropdown it should add that value to the textbox. If I choose another one, then it should concatenate the second value to the value in the textbox (to be comma separated).

I tried:

               <table>
                    <tr>
                        <td>Options:</td>
                        <td>
                            <select data-bind="value:currentSelection">
                                <option value=""></option>
                                <option value="Option 1">Option 1</option>
                                <option value="Option 2">Option 2</option>
                                <option value="Option 3">Option 3</option>
                                <option value="Option 4">Option 4</option>
                            </select>
                        </td>
                    </tr>                        
                    <tr><td>Selected options:</td><td><textarea data-bind='value: selectedOptions' ></textarea></td></tr>

                    <tr><td colspan="2">You have selected:  <span data-bind='text: selectedOptions'> </span></td></tr>
               </table>


 <script type="text/javascript">

 var ViewModel = function () {
     this.currentSelection = ko.observable("Option1");
     this.selectedOptions = ko.computed(function () {
         return this.selectedOptions()+", "+this.currentSelection();
     },this);
 };

 ko.applyBindings(new ViewModel()); 

</script>

But, this is not working. Please help... Thanks...

Upvotes: 0

Views: 2961

Answers (1)

Joan Charmant
Joan Charmant

Reputation: 2031

First of all, you may want to consider a multiple selection drop down if your users can select multiple items at once. KO will bind with an array of selected values and you will be able to do your computed as you want by simply concatening them. See here.

It will also be better because your list of options will not live in the view.

Something like this:

<select data-bind="options: availableOptions, selectedOptions: selectedOptions" size="4" multiple="true"></select>

<textarea data-bind='value: selectionText' ></textarea>


var ViewModel = function () {
    var self = this;
    self.availableOptions = ko.observableArray(["Option 1", "Option 2", "Option 3", "Option 4"]); 
    self.selectedOptions = ko.observableArray(["Option 1"]);
    self.selectionText = ko.computed(function () {
         return self.selectedOptions().join(',');
     }, self);
 };

If you can't use a multi selection list, you can manually subscribe to the currentSelection and concatenate in the handler. (search for "Explicitly subscribing to observables").

However if you continually add the currently selected option, you may end up with the same value added multiple times. So if you go that route you should keep a separate list of unique values (in a dictionary like object, like this) and compute the final value from that.

Upvotes: 1

Related Questions