Knockoutjsバインディングオブジェクトの問題

私はknockoutjsを勉強しているといくつかの問題があります。私は3つの車オブジェクトのリストを返すメソッドとASP.NET MVCのページがJSONです。私はそれをHTMLビューでselectにマップするのではなく、選択変更時に選択した車のコストを表示したいと思います。問題は、車の名前が表示されているが、価格は（ 'A Mercedes-Benz costs。'）ではないということです。それは何だろう？前もって感謝します！コントローラ：Knockoutjsバインディングオブジェクトの問題

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); 
}

とJavaScriptコードを見る：

<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>

出典

2013-10-31 IDeveloper

あなたがお使いのブラウザのJavaScriptコンソールをチェックすると次のエラーが表示されるはずです。なぜならとき

Uncaught TypeError: Unable to process binding "text: function (){return myOption().Make }" Message: Cannot read property 'Make' of undefined

あなたはこのエラーを取得しますあなたのページがロードされてmyOptionが空であるため、MakeとPriceのプロパティはありません。そのため、KOはバインディングdata-bind="text: myOption().Make"を実行できず、それ以降のバインディングの処理を停止します。

initDataを呼び出した後、myOptionに何かがありますが、data-bind="text: myOption().Make"の後のすべてのバインディングはもう動作しません。以下のような複数の方法があり、これを解決するために

：myOptionのデフォルト値を使用して

が
あなたのバインディングでヌルのチェックdata-bind="text: myOption() && myOption().Make"
またはここwith binding

を使用してwith結合の例です：

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

デモJSFiddle。

出典

2013-10-31 07:33:30 nemesv

ありがとうございました！ – IDeveloper

Knockoutjsバインディングオブジェクトの問題

答えて

関連する問題