无法使用foreout使用knockout js将值绑定到html表

时间:2014-04-26 09:12:15

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

我喜欢在api控制器中使用konckout js来绑定值列表这里是我的代码。在淘汰赛中获取值列表但在视图页面值中没有得到binded.In控制器这是我的代码

 public Qualification Get()
            {
                Qualification qualmodel = new  Qualification();
                Qualify qul = new Qualify();
                qualmodel.leadqualificlist = new List<Qualify>();
                LeadQualificationCriteria leadqual = new LeadQualificationCriteria();
                iWISEDataContainer leadqualif = new iWISEDataContainer();
                foreach (var test in leadqualif.LeadQualificationCriterias)
                {

                    qul.LeadQualifition = test.LeadQualificationFactor;
                    qul.Negativescore = test.NegativeScoreText;
                    qul.Neutralscore = test.PositiveScoreText;
                    qul.Positivescore = test.PositiveScoreText;

                    qualmodel.leadqualificlist.Add(qul);

                }

              return qualmodel;

            }

和我的淘汰赛代码:

function LeadQualificationModel() {
    debugger;
    var self = this;
    self.LeadQualifition = ko.observable("");
    self.Negativescore = ko.observable("");
    self.Neutralscore = ko.observable("");
    self.Positivescore = ko.observable("");
    self.Scoreschk = ko.observable("");
    self.Commenttext = ko.observable("");
    self.leadqualificlist = ko.observableArray();

    var baseUri = '/api/Qualification'; 
        $.ajax({
            url: '/api/Qualification',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (data1) {

                self.leadqualificlist(data1.leadqualificlist); //Here iam getting list of values
                debugger;
                //Put the response in ObservableArray                    
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });    
  $(document).ready(function () {
    debugger;
    ko.applyBindings(new LeadQualificationModel());
})

和我的html设计

<div style="width: 1100px; height: 700px;" class="container">
        <div style="width: 1100px; height: 110px; background-color: burlywood">
            <table>
                <tr>
                    <td style="width: 400px; height: 110px; background-color: burlywood;" align="left">
                        <h3>Qualification Factor</h3>
                    </td>
                    <td style="width: 400px; height: 110px; background-color: burlywood" align="center">
                        <h3>Score</h3>
                    </td>
                    <td style="width: 400px; height: 110px; background-color: burlywood" align="center">
                        <h3>Comment</h3>
                    </td>
                </tr>
            </table>
        </div>
        <div style="width: 1100px; height: 580px; border: 1px solid; overflow-x: scroll; overflow-y: scroll;" >    
            <table>              
                <tbody data-bind="foreach: leadqualificlist">                     
                    <tr>
                        <td style="width: 250px; height: 130px;">                          
                            <h4 data-bind="text: LeadQualifition"></h4>                           
                        </td>
                        <td style="width: 580px; height: 80px;">
                            <table>
                                <tr>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4>Negative</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4>Neutral</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4>Positive</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 210px; height: 50px;" align="center">

                                        <h4 data-bind="text: Negativescore">
                                            <br />
                                            0-1-2-3</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4 data-bind="text: Neutralscore">
                                            <br />
                                            4-5-6</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4 data-bind="text: Positivescore">
                                            <br />

                                            7-8-9</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />

                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked: $root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked: $root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked: $root.Scoreschk" />

                                    </td>
                                </tr>


                            </table>
                        </td>
                        <td>
                            <textarea style="width: 300px; height: 110px;" data-bind="value:$data.Commenttext">Text Box
                            </textarea>

                        </td>
                    </tr>                                 
                </tbody>  
            </table>

            <table style="width: 100%">
                <tr>
                    <td></td>
                    <td></td>
                    <td align="center">

                        @* <button data-bind="click :$root.create"  style="background-color:burlywood">Save</button>*@
                        <input type="submit" title="Save" value="Submit" data-bind="click:$root.create" style="background-color: burlywood" />
                        <input type="submit" title="Save" value="Next Stage" style="background-color: burlywood" />
                    </td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>

查看模型实体:

  public class Qualification 
        {
            public int Qualificationid { get; set; }
            public string LeadQualifition { get; set; }
            public string Negativescore { get; set; }
            public string Neutralscore { get; set; }
            public string Positivescore { get; set; }
            public int Scoreschk { get; set; }
            public string Commenttext { get; set; }

            public List<Qualify> leadqualificlist { get; set; }

        }

其他一个:

public class Qualify
    {
        public string LeadQualifition { get; set; }
        public string Negativescore { get; set; }
        public string Neutralscore { get; set; }
        public string Positivescore { get; set; }
    }

编辑: 我算得上是13。我的第零指数值:

LeadQualifition = "Winning products and services"
Negativescore = "Competitors very strong in this area"
Neutralscore = "Strong  differentiators"
Positivescore = "Strong differentiators"

可能我有13行的数据。

请有人建议在视图页面中绑定值。 的问候,

2 个答案:

答案 0 :(得分:0)

我认为你必须在像

这样的可观察数组中推送数据
for(  i=0; i<=data1.length;i++)

  self.leadqualificlist.Push(data1[i]) /// plz modify as per your data

}

答案 1 :(得分:0)

我使用以下内容进行操作;

视图模型中定义的本地函数,用于支持数组成员资格类型,例如

var Device = function (data) {
    this.id= ko.protectedObservable(data.id);
    this.name= ko.protectedObservable(data.name);
};

如果ajax响应成功,我会映射结果,例如:在以下示例中,devices是可观察数组。

success: function (data) {
    var mappedDevices = $.map(data.devices, function (item) { return new Device(item); });

    self.devices(mappedDevices);
    // Update the gui
    self.devicesLoaded(true);
    $('#devices-table').trigger('update');
}

如果Vivek提供的示例不起作用,请使用浏览器的开发工具检查响应是否确实在leadqualificlist数组中有数据。

这是一个jsfiddle示例。