Knockout保持XML节点大小写

时间:2022-04-03 07:11:18

I'm currently using Knockout to create some XML that's consumed by a third-party tool on the go.

我目前正在使用Knockout来创建一些在移动中由第三方工具使用的XML。

Rather straight forward,

相当直接,

var queryString = "";
var query = [
    '<Values data-bind="foreach: items, attr: {\'data-bind\': false}">',
        '<Value data-bind="text: $data, attr: {\'data-bind\': false}"></Value>',
    '</Values>'
];
var queryTemplate = query.join("");
var tmpDiv = document.createElement("div");
tmpDiv.innerHTML = queryTemplate;
ko.applyBindings({
    field: field,
    items: items
}, tmpDiv);
queryString = tmpDiv.innerHTML;

However, to my great dismay, the output nodes are all lowercase:

但是,令我非常沮丧的是,输出节点都是小写的:

<values>
    <value>1778</value>
</values>

In general web work the above isn't an issue, however the third-party tool is capitalization sensitive, so it's crucial for the nodes to be formatted as initially specified:

在一般的Web工作中,上面的问题不是问题,但是第三方工具对大小写敏感,因此将节点格式化为最初指定的至关重要:

<Values>
    <Value>1778</Value>
</Values>

Is there something in Knockout's manual that I missed? Is there an easy workaround?

我错过了Knockout手册中的内容吗?有一个简单的解决方法吗?

1 个解决方案

#1


As helpfully pointed out in the question comments by dperry, this is indeed an HTML vs XML issue. Using jQuery's parseXML() and binding to the resulting elements helps solve the issue easily:

正如dperry在评论中所指出的那样,这确实是一个HTML vs XML问题。使用jQuery的parseXML()并绑定到结果元素有助于轻松解决问题:

var tmpDiv = $.parseXML(queryTemplate);

And then later simply bind to tmpDiv.documentElement and use its innerHTML instead.

然后简单地绑定到tmpDiv.documentElement并使用其innerHTML。

If you're not using jQuery, you can resolve to simply using their implementation of the above function, might be outdated, original licensing applies:

如果你没有使用jQuery,你可以解决只是简单地使用他们的上述功能的实现,可能已经过时,原始许可适用:

// Cross-browser xml parsing
parseXML: function( data ) {
    var xml, tmp;
    if ( !data || typeof data !== "string" ) {
        return null;
    }
    try {
        if ( window.DOMParser ) { // Standard
            tmp = new DOMParser();
            xml = tmp.parseFromString( data , "text/xml" );
        } else { // IE
            xml = new ActiveXObject( "Microsoft.XMLDOM" );
            xml.async = "false";
            xml.loadXML( data );
        }
    } catch( e ) {
        xml = undefined;
    }
    if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
        jQuery.error( "Invalid XML: " + data );
    }
    return xml;
}

#1


As helpfully pointed out in the question comments by dperry, this is indeed an HTML vs XML issue. Using jQuery's parseXML() and binding to the resulting elements helps solve the issue easily:

正如dperry在评论中所指出的那样,这确实是一个HTML vs XML问题。使用jQuery的parseXML()并绑定到结果元素有助于轻松解决问题:

var tmpDiv = $.parseXML(queryTemplate);

And then later simply bind to tmpDiv.documentElement and use its innerHTML instead.

然后简单地绑定到tmpDiv.documentElement并使用其innerHTML。

If you're not using jQuery, you can resolve to simply using their implementation of the above function, might be outdated, original licensing applies:

如果你没有使用jQuery,你可以解决只是简单地使用他们的上述功能的实现,可能已经过时,原始许可适用:

// Cross-browser xml parsing
parseXML: function( data ) {
    var xml, tmp;
    if ( !data || typeof data !== "string" ) {
        return null;
    }
    try {
        if ( window.DOMParser ) { // Standard
            tmp = new DOMParser();
            xml = tmp.parseFromString( data , "text/xml" );
        } else { // IE
            xml = new ActiveXObject( "Microsoft.XMLDOM" );
            xml.async = "false";
            xml.loadXML( data );
        }
    } catch( e ) {
        xml = undefined;
    }
    if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
        jQuery.error( "Invalid XML: " + data );
    }
    return xml;
}