Question

I have an element that possesses an attribute whose value is bound to a knockout observable:

<text transform='matrix(1 0 0 1 1 1)' data-bind='attr:{transform:textTransform}'></text>

When the element loads I’d like the observable to contain the value defined on the dom element, however it instead loads as undefined and the attribute is removed from the dom element alltogether:

<text data-bind='attr:{transform:textTransform}'></text>

Is it possible to initialize the value of a knockout observable from a dom element attribute and persist the value of the dom element attribute as well?

UPDATE: http://jsfiddle.net/5Z2SC/10/

Answer 1

Another option would be to use a custom binding, and collect the current value of the element in the init function. This is much more reusable, in my opinion.

ko.bindingHandlers.transform = {
    init: function(element, valueAccessor) {
        valueAccessor()(element.getAttribute('transform'));
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.setAttribute('transform', ko.utils.unwrapObservable(value))
    }
};

Of course, yours will be more complicated, since you must be doing something with this transform property. That logic will probably want to go in the update section.