0

私は 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; }
    }

よろしく。

4

1 に答える 1