jquery - svg 图像未在 jquery 手风琴中显示

Question

我正在使用 jquery 手风琴。我在里面插入了一张桌子。在该表中有两列。第一列将显示一个 svg 元素，第二列将显示文本。我已经使用 knockoutjs 绑定了文本数据，它工作正常。但是如何将 svg 元素与第一列绑定。我想最好通过 d3js 绑定 svg 元素，但任何其他方式也将不胜感激

<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

您想使用自定义绑定。我使用带有 Knockout 的 Raphael.js 做了类似的事情

<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);
        }
    }
}

};

调用一次 init 方法来创建它，然后每次更新我的视图模型上的 LastUpdated 属性时调用 update 方法。