Question

我是MVC的新手，我想用Knockout实现一个简单的Web应用程序而且我被卡住了。

我的数据绑定似乎都不起作用。当页面加载时，我可以在Fiddler中看到有一个Get to the server，它返回一个包含所有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; }
    }

问候。

Answer 1

请看一下这个实现：

function DestinoPage() {
    this.Destinos = ko.observableArray([]);
}

function Destino(data) {
    this.Id = ko.observable(data.Id);
    this.Direccion = ko.observable(data.Direction);
    this.lat = ko.observable(data.lat);
    this.lng = ko.observable(data.lng);
};

$(function () {

    var page = new DestinoPage();

    ko.applyBindings(page);

    $.ajax({
        type: "GET",
        url: "/api/destino",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {

            $(data).each(function () {
                page.Destinos.push(new Destino(this));
            });

        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });

});

我改变了一点结构。这里的主要规则是保持一切简单。

MVC 4和Knockout的麻烦

1 个答案: