2013-02-17 47 views
0

我想用我的asp.net mvc 4应用程序淘汰赛。这就是我的代码的样子。使用揭示模块模式Knockout和Asp.net MVC4

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

我可以看到JSON数据推入teamMembers ko.observableArray在我的Ajax调用。这段代码应该按照我试图遵循的教程来工作,但是我并没有在我的表中显示我的任何数据。有人可以指导我这个代码有什么问题,为什么我的表不在这里呈现。谢谢

回答

0

您的客户端代码看起来不错可能是您的服务器端代码有问题。特别是检查你从服务器返回的数据是否在响应变量中返回。

我认为response.result没有任何数据,这就是为什么你会得到例外。所以请调试你的客户端代码。

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

我已经调试我的JS和我刚才说的数据是存在的,在被推到observableArray, – afr0 2013-02-17 07:35:18

+0

我也检查相同的代码数据填入表中。我使用它的webapi并删除.result,因为我的结果是响应varibale。如果你编写你的服务器端代码或者使用jsfiddle.net来演示,那就太好了 – 2013-02-18 09:14:03