私は MVC の初心者で、Knockout を使用して単純な Web アプリケーションを実装したいと思っています。
私のデータバインディングはどれも機能していないようです。ページが読み込まれると、Fiddler で確認できるように、サーバーへの Get があり、すべての Destinos を含む有効な Json が返されますが、ビューには表示されません。
意見:
<div id="right_col" class="right">
<table>
<thead>
<tr>
<th>Id</th>
<th>Direccion</th>
<th>lat</th>
<th>lng</th>
</tr>
</thead>
<tbody data-bind="foreach: Destinos">
<tr>
<td data-bind="text: Id"></td>
<td data-bind="text: Direccion"></td>
<td data-bind="text: lat"></td>
<td data-bind="text: lng"></td>
</tr>
</tbody>
</table>
<br />
<button data-bind="click: $root.GetDestinos">Get</button>
</div>
Javascript [ノックアウト]:
function DestinoVM () { //ViewModel
//Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.Id = ko.observable("");
self.Direccion = ko.observable("");
self.lat = ko.observable("");
self.lng = ko.observable("");
//The Object which stored data entered in the observables
var DestinoData = {
Id: self.Id,
Direccion: self.Direccion,
lat: self.lat,
lng: self.lng
};
//Declare an ObservableArray for Storing the JSON Response
self.Destinos = ko.observableArray([]);
GetDestinos(); //Call the Function which gets all records using ajax call
//Function to Read All Destinos
function GetDestinos() {
//Ajax Call Get All Employee Records
$.ajax({
type: "GET",
url: "/api/destino",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.Destinos(data); //Put the response in ObservableArray
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
//Ends Here
}
};
ko.applyBindings(new DestinoVM());
モデル:
public class Destino
{
[Key,DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int Id { get; set; }
public string lat { get; set; }
public string lng { get; set; }
public string Direccion { get; set; }
}
よろしく。