Question

I am using jquery accordion. I have inserted a table inside it. In that table there are two columns. 1st column will show an svg element and 2nd one will show text. I have binded the text data by using knockoutjs and it works fine. but how can i bind an svg element with 1st column. I want to bind svg element by d3js preferably but any other way will also be appreciated

<table id="AccordionTable">
    <tbody data-bind="foreach:Items">
        <tr>
            <td data-bind="I Want to bind here an svg element dynamically"></td>
            <td data-bind="text:Name" style="padding-left: 15px"></td>
        </tr>
    </tbody>
</table>

Answer 1

You want to use custom binding. I have done something similar using Raphael.js with Knockout

<td data-bind="createSvg: parameter"></td>

ko.bindingHandlers.createSvg = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
    var options =
        {
            strokeWidth: 5,
            boxBackgroundColour: $('.navbar-inner').css('background-color'),
            positiveFeed: '#00bb00',
            negativeFeed: '#bb0000'
        };
    var substation = new Substation(element, options);
    viewModel.Substation = substation;
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
    ko.utils.unwrapObservable(viewModel.LastUpdated);
    if ($(element).is(':visible'))
    {
        var substation = viewModel.Substation;
        if (viewModel.RtuUserData)
        {
            substation.set(element, viewModel);
        }
    }
}

};

The init method is called once, to create it, and then the update method is called every time the LastUpdated property on my view model is updated.