Question

I have converted some XML to Json using JSON.Net and am then binding to a view using Knockout.js.

The problem I have is that my XML attributes are represented in json, prefixed with an @,which is seen an illegal character in Knockout.js.

My view model has the following:

self.titles = ko.computed(function () {
     var str = self.searchForText().toLowerCase();

     return jsonString.AutoPolicy.Policy.filter(function (el) {                           
             return el['@id'].toLowerCase().indexOf(str) == 0;
     });
}, self);

and my html:

    <div id="searchResultsDiv" class="sectionDiv">             
         <div data-bind="foreach: titles">                         
            <div data-bind="text: @id, click: $parent.isSelected, event : { dblclick: $parent.openFileDblClick }"></div>                                                             
         </div>   
    </div>

How do I bind to the attribute? Is there an escape key, or an alternative way to return from the view model?

EDIT

I have modified my view model to add an element that knockout can bind to:

 // bind a list to json data **NEEDS TO VE ALL TITLES**
 self.titles = ko.computed(function () {
      var str = self.searchForText().toLowerCase();                      
         jsonString.AutoPolicy.Policy['@id']

         return jsonString.AutoPolicy.Policy.filter(function (el) {
            el.id = el['@id'];               
            return el['@id'].toLowerCase().indexOf(str) == 0;
         });
      }, self);

This gives the desired results but is there a better way?

Thanks

Answer 1

Try something like this:

<div data-bind="text: $data['@id']"></div>