Quesurfin Quesurfin - 1 month ago 13
HTML Question

Observable Array and foreach Lists

I have this code:

<select multiple="multiple" data-bind="options:markerResults, optionsText: function(item) {
return item.name +' '+ item.formatted_address
}">
</select>


And it works. But, This code:

<ul data-bind="foreach: markerResults">
<li>
<stong><span data-bind:"text: name"></span></strong>
<span data-bind:"text: formatted_address"></span>
<span data-bind:"text: rating"></span>
</li>
</ul>


Doesn't. How can I make the code above work?

Thank you!

more code:

for (var j = 0; j < allResults.length; j++) {
createMarker(allResults[j]);
allResults.push(results);
console.log(allResults);
}
}

Answer

here is the fiddle http://jsfiddle.net/LkqTU/32252/

function model() {
  var self = this;
  this.text = ko.observable('hello');
  this.markerResults = ko.observableArray([
    { name: "Bungle", formatted_address: "1 My Way", rating: 'A' },
    { name: "George", formatted_address: "2 My Way", rating: 'B' },
    { name: "Zippy", formatted_address: "3 My Way", rating: 'C' }
]);

}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

here is the html

<ul data-bind="foreach: markerResults">
     <li>
      <strong><span data-bind="text: name"></span></strong> 
     <strong><span data-bind="text: formatted_address"></span></strong> 
      <strong><span data-bind="text: rating"></span></strong> 
     </li>
</ul>