Unique element ids in knockout.js: Chrome OK, FF and Opera fail

Question

I am working on a library of SVG UI elements and planning to use knockout.js. Here is a very basic page that does what I need without knockout.js, it works fine in Chrome, FF, Opera. It draws a piece of pipe:

<html>
<body>
    <div width="100px" height="100px">
        <svg width='100px' height='100px'>
          <linearGradient id="gradId" y1='-20%' x1='0%' y2='100%' x2='0%' gradientUnits='objectBoundingBox'>
            <stop  offset='-20%' style="stop-color: #303030"/>
            <stop  offset='40%' style="stop-color: #D0D0D0"/>
            <stop  offset='100%' style="stop-color: #303030"/>
          </linearGradient>
          <rect id="myRect" x='0%' y='30%' width='100%' height='40%' />
        </svg>
    </div>
    <script type="text/javascript">
        document.getElementById("myRect").style.fill = "url(#gradId)";
        console.log(document.getElementById("myRect").style.fill);
    </script>
</body>
</html>

Now to the knockout.js templates. For every instance of the templated control, I will need unique id, so correspondent gradients are referenced properly and different pipe elements do not share gradients. With some help from this post, I crafted the following html:

<html>
<head>
    <script type="text/javascript" src="js/knockout-2.1.0.debug.js "></script>
    <script type="text/javascript">
        // knockout code inspired by https://stackoverflow.com/questions/9233176/unique-ids-in-knockout-js-templates
        ko.bindingHandlers.uniqueId = {
            init: function (element, valueAccessor) {
                // Generate new element id
                element.id = ko.bindingHandlers.uniqueId.prefix + valueAccessor() + ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);
                console.log("Element id:" + element.id);
            },
            prefix: "autoId_",
            counter: 0
        };

        ko.bindingHandlers.uniqueStyleFill = {
            init: function (element, valueAccessor) {
                // Use recently generated element id in the style.fill value
                var value = ko.bindingHandlers.uniqueId.prefix + valueAccessor() + ko.bindingHandlers.uniqueId.prefix + ko.bindingHandlers.uniqueId.counter.toString();
                element.style.fill = "url(#" + value + ")";
                console.log("Binding:" + element.style.fill);
            }
        }; 
    </script>
</head>
<body>
<!-- Define ko template plumbing-horizontal-pipe that uses bodyColor and bodyColorLight attributes of the bound object --> 
    <script type="text/html" id="plumbing-horizontal-pipe">
        <svg width='100px' height='100px'>
          <linearGradient data-bind="uniqueId: 'horPipeGrad_'" y1='-20%' x1='0%' y2='100%' x2='0%' gradientUnits='objectBoundingBox'>
            <stop  offset='-20%' data-bind="style: {'stop-color': bodyColor()}"/>
            <stop  offset='40%' data-bind="style: {'stop-color': bodyColorLight()}"/>
            <stop  offset='100%'  data-bind="style: {'stop-color': bodyColor()}"/>
          </linearGradient>
          <rect x='0%' y='30%' width='100%' height='40%' data-bind="uniqueStyleFill: 'horPipeGrad_'"/>
        </svg>
    </script>
    <div width="100px" height="100px">
    <!-- Load ko template defined above, bind 'pipe' -->
        <svg width="100" height="110" data-bind="template: { name: 'plumbing-horizontal-pipe', data: pipe }" />
    </div>
    <!-- ko view model with one item 'pipe' -->
    <script type="text/javascript">
        function MyViewModel() {
            this.pipe = { bodyColor: ko.observable("#FF0000"), bodyColorLight: ko.observable("#FFA0A0") };
        }
        var g_vm = new MyViewModel();
        // This should make the browser display a red pipe. Works in Chrome, doesn't work in FF and Opera.
        ko.applyBindings(g_vm);
    </script>
</body>
</html>

It works fine in Chrome - the red pipe is displayed. FF and Opera keep displaying black rectangle, which means the SVG object doesn't pick up the gradient. I checked FF log output, it looks totally fine:

[21:30:08.606] Element id:autoId_horPipeGrad_autoId_1
[21:30:08.610] Binding:url("#autoId_horPipeGrad_autoId_1") none

As one can see, the id for the gradient is generated and used in the fill attribute for the rect style. But the browser doesn't use this gradient when displaying the rectangle.

What's wrong here? Any workarounds? Thanks!

antishok · Accepted Answer · 2012-09-28T05:24:20.503

0

I've found that if I'm using native KO bindings for svg node properties, it's best to work with the 'attr' binding. And indeed it seems to fix your problem: http://jsfiddle.net/antishok/UHnA8/1/

(I know that the 'css' binding doesn't work good because the 'class' property for svg elements isn't a simple string. Not sure why 'style' doesn't work either, but at least attr seems to always work)

edited Sep 28 '12 at 05:24

answered Sep 28 '12 at 05:19

antishok

2,910
16
21

Thanks a lot antishok, using attr instead of style seems to work in FF and Opera. – Sergey Sorokin Sep 28 '12 at 16:12
You might want to accept the answer, then.. you don't want a low accept-rate, do you? :P – antishok Oct 01 '12 at 05:44
Done. Just getting familiar with local awesomness-meters, thanks for the tip. Not enough karma to upvote though. – Sergey Sorokin Oct 01 '12 at 16:03

Unique element ids in knockout.js: Chrome OK, FF and Opera fail

1 Answers1