Apply knockout if and parameters bind to each other in the same data binding
I am trying to move an if statement into a data binding, but I came across an error message:
Multiple bindings (if and parameters) try to control the child of the binding of the same element.
what I'm trying to do is control the visibility of the dropdown so that it doesn't show up based on the if condition. I tried using visible binding, but only removed the dropdown items, not the actual dropdown.
This is what I am currently trying:
<select id="IdField" name="Id" data-placeholder="Select an item" data-bind="if: items().length > 0, options: items(), optionsText: 'Name', optionsValue: 'Id', value: DdlSelectedValue, event: { change: selectChanged }">
</select>
This is what my original code looked like:
<!-- ko if: items().length > 0 -->
<select id="IdField" name="Id" data-placeholder="Select an item" data-bind="options: items(), optionsText: 'Name', optionsValue: 'Id', value: DdlSelectedValue, event: { change: selectChanged }">
</select>
<!--/ko-->
Is there a way that I could move the if statement into the data binding using parameters?
source to share
What you have is the correct way to go if you want to select
actually be absent from the page when items().length
zero.
Alternatively, you can use visible
, which is of course slightly different (when items().length
equal to 0, there will be select
, it will just be hidden):
<select id="IdField" name="Id" data-placeholder="Select an item" data-bind="visible: items().length > 0, options: items(), optionsText: 'Name', optionsValue: 'Id', value: DdlSelectedValue, event: { change: selectChanged }">
</select>
source to share