3

在 svg 中，如果我使用敲除来设置节点的xlink:href属性a，则属性的命名空间设置不正确，因此a单击时不能用作链接。

例如，考虑以下包含两个链接椭圆的 svg。一个具有xlink:href硬编码的属性，另一个是通过data-bind属性敲除设置的：

<svg width="5cm" height="6cm" viewBox="0 0 5 6" version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <rect x=".01" y=".01" width="4.98" height="5.98"  
        fill="none" stroke="blue"  stroke-width=".03"/> 
  <a xlink:href="#hardcoded"> 
    <ellipse data-bind="attr: blue" /> 
  </a> 
  <a data-bind="attr: { 'xlink:href': href }"> 
    <ellipse data-bind="attr: red" /> 
  </a> 
</svg>

让淘汰赛运行非常容易：

ko.applyBindings( { 
  blue: { cx:2.5, cy:1.5, rx:2, ry:1, fill:"blue" },
  href: '#foo', 
  red: { cx:2.5, cy:4.5, rx:2, ry:1, fill:"red" },
});

但只有硬编码的链接有效。如果我添加一些代码来查看namespaceURI属性节点的值，我可以看到xlink:href由敲除设置的属性有一个nullnamespaceURI，而不是硬编码的，它设置为http://www.w3.org/1999/xlink.

Array.forEach( document.getElementsByTagName('a'), function(a){
  a.setAttribute('title', 'xlink:href namespaceURI = ' + a.getAttributeNode('xlink:href').namespaceURI);
});

您可以在小提琴中查看所有这些。

有没有一种简单的方法来告诉淘汰赛属性的正确命名空间应该是什么，或者我是否需要编写自定义绑定？

4

2 回答 2

4

我的后备解决方案是添加此自定义绑定：

ko.bindingHandlers['attr-ns'] = {
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    ko.utils.objectForEach( ko.unwrap( valueAccessor() ), function(name, value){
      var prefixLen = name.indexOf(':');
      var prefix    = name.substr( 0, prefixLen );
      var namespace = prefixLen < 0 ? null : element.lookupNamespaceURI( prefix );

      element.setAttributeNS( namespace, name, ko.unwrap( value ) );
    });
  }
};

并更改模板以使用attr-ns我定义的绑定：

<a data-bind="attr-ns: { 'xlink:href': href }">
  <ellipse data-bind="attr: red" />
</a>

这似乎工作正常，但如果我不必这样做，我宁愿不这样做。更多自定义代码 = 更多可能出错的代码。

您可以在 fiddle 中查看此解决方案。

于 2013-08-06T15:18:26.947 回答
1

您必须使用命名空间感知版本覆盖默认attr绑定处理程序。

FWIW，这是我的看法，将其用作透明的插件，它甚至支持命名空间前缀：

var attrHtmlToJavascriptMap = { 'class': 'className', 'for': 'htmlFor' },
    namespaceDecl = {
        svg: "http://www.w3.org/2000/svg",
        xlink: "http://www.w3.org/1999/xlink"
    };

ko.bindingHandlers['attr'] = {
    'update': function(element, valueAccessor, allBindings) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || {};
        ko.utils.objectForEach(value, function(attrName, attrValue) {
            var attrRawValue = ko.utils.unwrapObservable(attrValue),
                toRemove = (attrRawValue === false) || (attrRawValue === null) || (attrRawValue === undefined),
                attrStrValue = attrRawValue.toString(),
                attrNameParts = attrName.split(":"),
                attrNsUri = (attrNameParts.length === 2) ? namespaceDecl[attrNameParts[0]] : null,
                attrName = (attrNsUri) ? attrNameParts[1] : attrNameParts[0];

            if (toRemove) {
                if (attrNsUri) {
                    element.removeAttributeNS(attrNsUri, attrName);
                } else {
                    element.removeAttribute(attrName);
                }
            }

            if (ko.utils.ieVersion <= 8 && attrName in attrHtmlToJavascriptMap && !attrNsUri) {
                attrName = attrHtmlToJavascriptMap[attrName];
                if (toRemove)
                    element.removeAttribute(attrName);
                else
                    element[attrName] = attrValue;
            } else if (!toRemove) {
                if (attrNsUri) {
                    element.setAttributeNS(attrNsUri, attrName, attrStrValue);
                } else {
                    element.setAttribute(attrName, attrStrValue);
                }
            }

            if (attrName === "name") {
                ko.utils.setElementName(element, toRemove ? "" : attrValue.toString());
            }
        });
    }
};

http://jsfiddle.net/ZghP7/1/

于 2013-08-06T15:58:53.993 回答