【问题标题】:using revealing module pattern with Knockout and Asp.net MVC4使用带有 Knockout 和 Asp.net MVC4 的显示模块模式
【发布时间】:2013-02-17 00:37:30
【问题描述】:

我正在尝试对我的 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>

我可以看到 json 数据在我的 ajax 调用中被推送到 teamMembers ko.observableArray。此代码应该按照我尝试遵循的教程工作,但我没有在我的表中显示我的任何数据。有人可以指导我这段代码有什么问题以及为什么我的表格没有在这里呈现。谢谢

【问题讨论】:

    标签: javascript jquery asp.net-mvc-4 knockout.js knockout-2.0


    【解决方案1】:

    您的客户端代码看起来不错可能是您的服务器端代码有问题。检查您从服务器返回的内容,尤其是响应变量中返回的数据。

    我认为 response.result 没有任何数据,这就是您遇到异常的原因。所以请调试您的客户端代码。

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

    【讨论】:

    • 我已经调试了我的 js,正如我所说的,数据在那里并被推送到 observableArray,
    • 我还检查了表中填充了相同的代码数据。我使用 webapi 并删除 .result 因为我的结果是响应变量。如果你写你的服务器端代码或者使用jsfiddle.net来演示会很好
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-15
    • 2014-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多