jsfiddle zeigt keine Ausgabe an, wenn ich Array-Ergebnisse vom Modell anzeigen möchte?

Question

Dies ist js Geige: fiddle link

var CITIES = ko.observableArray([]); 
ko.applyBindings(CITIES, document.getElementById("popupCityList")); 
var arr = []; 
arr.push({ "cityname": "Mumbai", "cityid": 1 }); 

I Objekt zu beobachten Array bin schieben. Aber ich kann kein Ergebnis sehen. Ich bin sehr neu im KO-Modus. Kann mir bitte jemand dabei helfen?

Answer 1

Es gibt ein paar Dinge schief gehen hier:

• Javascript ist Groß- und Kleinschreibung: Wenn Sie Ihre Immobilie cityname benannt ist, nicht, um es mit CityName
• Ihre Ansichtsmodell verweisen kann, ist eine beobachtbare Array, das tut Habe keine CITIES Eigenschaft. Beachten Sie die Daten innerhalb des Viewmodel mit $data (foreach: $data), oder wickeln Sie das Array in einem Objekt (ko.applyBindings({CITIES: CITIES}))
• Sie sollten nicht machen benutzerdefinierte Attribute, ohne sie voran mit data-

Eine korrigierte Version:

var CITIES = ko.observableArray([]); 
 

 
var viewmodel = { 
 
    CITIES: CITIES 
 
}; 
 

 
ko.applyBindings(viewmodel, document.getElementById("popupCityList")); 
 

 
var arr = []; 
 

 
arr.push({ 
 
    "cityname": "Mumbai", 
 
    "cityid": 1 
 
}); 
 

 
CITIES(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div> 
 
    <ul id="popupCityList" data-bind="foreach: CITIES"> 
 
    <li data-bind="text: cityname"></li> 
 
    </ul> 
 
</div>

Zusätzliche Hinweise:

• Sie können direkt zu einem beobachtbaren Array wechseln. Ie .: Sie brauchen nicht die arr, aber schreiben können viewmodel.CITIES.push({ /* ... */ })
• Es ist eine gute Idee, einige Code-Konventionen in Bezug auf die Gehäuse Ihrer Variablennamen zu folgen.

Answer 2

var CITIES = ko.observableArray([]); 
 
// You are giving the wrong element 
 
ko.applyBindings(CITIES, document.getElementById("popupCityList")[0]); 
 
var arr = []; 
 
CITIES.push({ "cityname": "Mumbai", "cityid": 1 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
 

 
<select id="popupCityList" data-bind="options: CITIES, 
 
             optionsText: 'cityname', 
 
             value: 'cityid', 
 
             optionsCaption: 'Choose...'"></select>