CODEWITHSUNDEEP
knockout.js
Zach M.
Zach M.

Reputation: 1194

Referencing knockout observable for custom html id's

I have a foreach knockout loop in which I would like to set the id for each checkbox created to the name of my observable in the loop.

<tbody data-bind="foreach: FormatVendorRules">
                    <tr class="h4">
                        <td data-bind="text: SubCategoryCode"></td>
                        <td>
                            <div class="onoffswitch">
                                <input name="validationCheckBox" type="checkbox" 
                                name="onoffswitch" class="onoffswitch-checkbox" 
                                id="myId+"text: SubCategoryCode"" data-bind="checked: IsEnabled" /> //This is where I want to define the id
                                <label class="onoffswitch-label" for="myId+"text: SubCategoryCode"">
                                    <div class="onoffswitch-inner"></div>
                                    <div class="onoffswitch-switch"></div>
                                </label>
                            </div>
                        </td>
                    </tr>
                </tbody>

So the id's should be

Upvotes: 0

Views: 71

Answers (1)

nemesv
nemesv

Reputation: 139798

You need to use the attr binding to set the id attribute (or any other attribute as well):

data-bind="checked: IsEnabled, attr: { id: 'myId' + SubCategoryCode() }"

Note: you only need the () at the end of SubCategoryCode() if this property is ko.observable. However if your SubCategoryCode is a regular property you just need to write: attr: { id: 'myId' + SubCategoryCode }

Upvotes: 3

Related Questions