Knockoutjs Bindung von Objekten Problem

Ich studiere knockoutjs und habe einige Probleme. Ich habe ASP.NET MVC Seite mit einer Methode, die Rückgabe ist eine Liste von drei Auto-Objekte ist JSON. Ich als Karte zu select in der HTML-Ansicht, und ich möchte die Anzeige der Kosten von ausgewählten Auto auf Auswahl ändern. Das problem ist, dass ein name, ein Auto zu sehen ist, wenn ein Preis nicht ('Eine Mercedes-Benz-Kosten .'). Was könnte es sein? Vielen Dank im Voraus!
Controller:

public class Car
{
    public string Make { get; set; }
    public decimal Price { get; set; }
}
public JsonResult GetCars()
{
    List<Car> cars = new List<Car>();
    cars.Add(new Car { Make = "Mercedes-Benz", Price = 103000 });
    cars.Add(new Car { Make = "Toyota", Price = 37000 });
    cars.Add(new Car { Make = "Huyndai", Price = 17000 });
    return Json(cars, JsonRequestBehavior.AllowGet);
}

Und Ansicht mit Javascript-code:

<head>
    <script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="~/Scripts/knockout-3.0.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function Car(data) {
                this.Make = ko.observable(data.Make);
                this.Price = ko.observable(data.Price);
            }

            function CarsViewModel() {
                var self = this;
                //Data
                self.someOptions = ko.observableArray([]);
                self.myOption = ko.observable();

                //Operations
                self.initData = function () {
                    $.get('/Home/GetCars', function (data) {
                        var mappedCars = $.map(data, function (item) { return new Car(item) });
                        self.someOptions(mappedCars);
                    });
                }
            }

            ko.applyBindings(new CarsViewModel());
        });

    </script>
</head>
<body>
    <div>
        <button data-bind="click: initData">Load data</button>
        <h4>Preview</h4>
        <p>
            <select data-bind="options: someOptions, optionsText: 'Make', value: myOption"></select><br />
            A <span data-bind="text: myOption().Make"></span> costs <span data-bind="text: myOption().Price"></span>.
        </p>
    </div>
</body>

InformationsquelleAutor IDeveloper | 2013-10-31

  1. 15

    Wenn Sie Ihren browser JavaScript-Konsole, sollten Sie die folgende Fehlermeldung angezeigt:

    Uncaught TypeError: Unable to process Bindung "text: Funktion
    (){return meineoption().Machen } " - Nachricht: Cannot read property ''
    undefined

    Erhalten Sie diese Fehlermeldung, da beim laden der Seite Ihrer myOption ist leer, so dass es nicht über eine Make und Price Eigenschaften. So KO nicht ausführen kann, die Bindung data-bind="text: myOption().Make" und es hält sich mit der Bearbeitung der weiteren Bindungen.

    Nach dem Aufruf initData jetzt haben Sie etwas in myOption aber noch alle Bindungen nach der data-bind="text: myOption().Make" nicht mehr funktionieren.

    Um dieses Problem zu lösen gibt es mehrere Möglichkeiten, wie:

    • mit einem Standard-Wert in meineoption
    • auf null prüfen in Ihren Bindungen mit data-bind="text: myOption() && myOption().Make"
    • oder verwenden Sie den Bindung

    Hier ist ein Beispiel für die with Bindung:

    <!-- ko with: myOption -->
   A <span data-bind="text: Make"></span> 
   costs <span data-bind="text: Price"></span>.
<!-- /ko -->

    Demo JSFiddle.

    Vielen Dank für eine Erklärung!

    InformationsquelleAutor nemesv

Schreibe einen Kommentar