Knockout TypeError: m.apply is not a function

Question

Below is the code for a table with a collapse panel. The click event handler is throwing an error message that "m.apply is not a function".

Quux.CollapseExpandCustom.ToggleSection('+id+') is the function which accepts a dynamic id.

Please let me know what the mistake I am making. I need to bind the click event as mentioned in the code.

<table id="EditFooList">
    <thead>
        <tr>
            <th>User</th>
            <th>Started Date</th>
            <th>Foo</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: EditedDataArray">
        <tr>
            <td data-bind="text: $data.UserName"></td>
            <td data-bind="text: $data.TimeStampString"></td>
            <td>
                <div>
                    <p data-bind="text: $data.Title, click: $root+'.'+'Quux.CollapseExpandCustom.ToggleSection('+$data.Baz+')'">Foos<img src="~/Images/Collapse.png" /></p>
                    <div>
                        <div data-bind="attr:{id: $data.Baz}">
                            <ul data-bind="foreach: $data.FooDetailViewModels">
                                <li>
                                    <input type="button" data-bind="value: 'Resume -   ' + $data.TimeDate,click: $root.ClickResume , attr:{fooStudyId:$data.FooStudyId}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="button" data-bind="value: 'Plan -   ' +$data.TimeDate, click: $root.ClickPlan , attr:{fooStudyId:$data.FooStudyId}" />
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <input type="button"value="New" data-bind="attr:{id: $data.Baz} , click: $root.FooCLick"/>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

This answer may help: Knockout click binding strange behavior

Basically, if you wrap this in an anonymous function it should stop the error:

<p data-bind="text: $data.Title, click: function() { $root.Quux.CollapseExpandCustom.ToggleSection($data.Baz); }">Foos<img src="~/Images/Collapse.png" /></p>

However, as mentioned by @Nathan Fisher, you may be better off creating a function in your viewmodel that handles doing this process.

Also, i'm not sure why you're building a string with the call to the function. ie.

click: $root.Quux.CollapseExpandCustom.ToggleSection($data.Baz)

instead of

click: $root+'.'+'Quux.CollapseExpandCustom.ToggleSection('+$data.Baz+')'