Knockup.js dropdown not working after adding KO binding

user0QdE 0
Viewed 30

I am trying to bind the dropdown . following code works

<select data-bind="options :MyArray"/>

However it doesn't works but when i add the Knockout bindings (as below) .the dropdown doesn't shows up

<select data-bind="options: MyArray, event:{change:DropdownChnaged.bind($data,'Task')} "/>
knockout.js javascript
1 Answers

It looks as though you have a typo in your change event (DropdownChnaged -> DropdownChanged). That maybe the root cause of the issue.

But I would also avoid using the change event and instead use knockouts subscriber functionality.

When the dropdown value is being set, you can subscribe to the value and execute a function when the observable value is updated. I have provided a snippet below which should demonstrate how you can use this.

var VM = function() {
  this.MyArray = [
    { 
      text: "Item A",
      data: "This is the description for Item A",
      otherData: { myData: 'MyOtherDataA'}
    },
    { 
      text: "Item B",
      data: "Description of Item B",
      otherData: { myData: 'MyOtherDataB'}
    },
    { 
      text: "Item C",
      data: "This is Item C's description",
      otherData: { myData: 'MyOtherDataC'}
    }
  ];
  
  this.selectedItem = ko.observable();
  
  this.selectedItem.subscribe(function(latest)
  {
    console.log("Change event triggered");
    console.log(latest);
  }, this);
};

ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="value: selectedItem, options: MyArray,  optionsText: 'text'">
</select>

<!-- ko with: selectedItem -->
<p>
  Item Description: <span data-bind="text: data"></span>
</p>
<!-- /ko -->

Dean Duff0
Related