可以't能够使用foreach和knocket js将值绑定到html表
Can't able to bind values to the html table using foreach using knockout js
嗨，我正在api控制器中使用konckout js绑定值列表，这是我的代码。在敲除中，iam获取值列表，但在视图中，页面值不被绑定。在控制器中，这是我的代码
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行的数据。
请有人建议在查看页面中绑定值。问候，
我认为你必须在这样的可观察阵列中推送数据
for( i=0; i<=data1.length;i++)
self.leadqualificlist.Push(data1[i]) /// plz modify as per your data
}
我使用以下操作；
视图模型中定义的局部函数，用于支持数组成员类型，例如
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示例。
相关文章：
- 一种将Apache Thrift JS绑定与Backbone.JS一起使用的方法
- 基于数据d3.js绑定svg梯度
- Knockout.js绑定范围
- 淘汰赛JS;绑定值未更新或 ko.computed(） 未更新
- 主干.js绑定到集合“添加”呈现视图两次
- 使用datetimepicker敲除js绑定会出现异常
- backbone.js绑定问题
- 如何使用普通js绑定对象以更新值
- 根据某些条件将 JS 绑定到可观察对象内的数组元素
- 挖空JS绑定不输出简单视图模型的值
- Angular js 绑定与普通 html 元素
- 尝试将JS绑定到html图像url - 使用WP主题定制器API
- 导轨和挖空.js绑定嵌套元素而不在fields_for中使用foreach
- 挖空.js绑定不同的文本以进行<选择>和<选项>
- 如何使用 Knockout.js 绑定数组中的子数组
- Ember.js绑定教程
- JS:绑定和函数链
- 挖空.js绑定模板以显示弹出窗口
- 传递 Angular.js绑定到 javascript 函数
- Twitter 引导工具提示和 Angular.js绑定
