data-win-bind special characters in binding name

Question

Hi,

I'm trying to bind a json result from a web service but the json data contains object names with special characters for example te-, te+, etc.

When I specify a special character in the data-win-bind parameter I always get an error:

<span data-win-bind="innerText: te-"></span>

How can bind these names ? I don't have control over the json response from the webservice.

Answer 1

Hi Robby - I'm not familiar with this area at all. Can you help walk me through how you're expecting this to work, and then I can try to get this figured out?

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Hi,

I created a binding template which is bind to the json result of a webservice:

<div id="thermometerTemplate" data-win-control="WinJS.Binding.Template">
                        <div class="container">
                            <span id="temp" data-win-bind="innerText: te hubPage.convertNullToZero"></span>°C
                            <span data-win-res="{ 'innerText': 'TempMin' }"></span>
                            <span data-win-bind="innerText: te hubPage.convertNullToZero"></span>°C <span data-win-bind="innerText: te-"></span><br />
                            <span data-win-res="{ 'innerText': 'TempMax' }"></span>
                            <span data-win-bind="innerText: te hubPage.convertNullToZero"></span>°C <span data-win-bind="innerText: te+"></span><br />
                        </div>
                    </div>
                    <div id="thermometerContainer"></div>

The binding is done like this:

var baseURI = "http://<web service url>";
            WinJS.xhr({
                type: "get",
                url: baseURI,
                headers: { "Content-type": "application/json" }
            }).then(function (r) {
                if (r.responseText == null) {
                    //TODO error handling
                }
                else {
                    var result = JSON.parse(r.responseText);

                    // Thermometers
                    var thermometers = result.response.thermometers;
                    for (var i = 0; i < thermometers.length; i++) {
                        document.querySelector('#thermometerTemplate').winControl.render(thermometers[i], document.querySelector('#thermometerContainer'));
                    }
                }
            });

The json response from the webservice:

{"status": "ok", "response": {"thermometers": [{"id":0,"name":"Temp","te":15.7,"hu":69,"favorite":"no","channel":2,"te+":15.7,"te+t":"09:41","hu+":86,"hu+t":"08:17","te-":4.9,"te-t":"08:17","hu-":69,"hu-t":"09:33","outside":"no"}]}}

As you can see in the json response, the name of some objects contain - and + characters (for example te+ and te-) but if I try to use these object names in the binding template this generates an error.

Answer 3

Please post a project which duplicates this problem, and I'll file a bug for it.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 4

Hi Matt,

I already found a workaround by just doing a string replace of the special characters before parsing the json response. Pretty obvious workaround actually :-)

Thx