在Knockout和Asp.net MVC4中使用顯示模塊模式

Question

我正在嘗試在我的asp.net mvc 4應用程序中使用淘汰賽。 這就是我的代碼的樣子。

    <script>


var my = my || {}; //creating private namespace to avoid any conflicts other namespaces: my namespace

$(document).ready(function () {



    ////////////////view model testing////////////////////////////

    // Define Main ViewModel; javascript Object Literals
    ////it is a workaround for moduler JS pattern including revealing js pattren 
    ///it also uses KnockOut. end product ViewModel; 

    function teammemberModel() {
        this.Id = ko.observable();
        this.Title = ko.observable();
        this.Name = ko.observable();
        this.Email = ko.observable();
        this.Nationality = ko.observable();
        this.Sex = ko.observable();

    };


    my.viewModel = function () {

        var teamMembers = ko.observableArray([]),

            loadTeamMembers = function (projectId) {                
                $.ajax({
                    type: "GET",
                    url: "/Project/GetTeamMembers?projectId=" + projectId,

                    success: function (response) {

                        my.viewModel.teamMembers.removeAll();
                        $.each(response.results, function (x, team) {
                            my.viewModel.teamMembers.push(new teammemberModel()
                                .Id(team.Id)
                                .Title(team.Title)
                                .Name(team.UserName)
                                .Email(team.Email)
                                .Nationality(team.Nationality)
                                .Sex(team.Sex)

                            );



                        });
                    }                        
                });
            }
        return {
            teamMembers: teamMembers,
            loadTeamMembers: loadTeamMembers
        };
    } ();

    //Applies KO bindings        
    ko.applyBindings(my.viewModel);
    my.viewModel.loadTeamMembers(6);

    ///////////////////////////////////////////////////       

    });    
    </script>

這是我的客戶端Knockout基本視圖模型的示例模塊化JS實現。 我的看法如下。

    <table >    
    <thead>
    <tr>

        <th>Title</th>
        <th>Description</th>
        <th>Status</th>
        <th>Created By</th>
        <th>Created Date</th>
    </tr>
</thead>    
<tbody data-bind="foreach: teamMembers">

    <tr>                            
        <td data-bind="text: UserName"></td>
        <td data-bind="text: Email"></td>
        <td data-bind="text: Sex"></td>
        <td data-bind="text: Title"></td>
        <td data-bind="text: Nationality"></td>

    </tr>                        

      </tbody>
    </table>

我可以在我的Ajax調用中看到json數據被推送到teamMembers ko.observableArray中。 這段代碼應該按照我要遵循的教程工作，但是我沒有在表中顯示任何數據。 有人可以指導我此代碼有什么問題以及為什么我的表未在此處呈現。 謝謝

Answer 1

您的客戶端代碼看起來不錯，您的服務器端代碼可能有問題。 檢查您從服務器返回的內容，特別是數據是否在響應變量中返回。

我認為response.result沒有任何數據，這就是為什么您要獲取異常。 因此，請調試您的客戶端代碼。

$.each(response.results, function (x, team) {}