Javascript 敲除集合链接绑定错误
这是我的击倒视图模型Javascript 敲除集合链接绑定错误,javascript,html,mvvm,knockout.js,Javascript,Html,Mvvm,Knockout.js,这是我的击倒视图模型 $(document).ready( function () { var Crime = function (CaseNumber, DateOfIncident, Description) { this.CaseNumber = CaseNumber; this.DateOfIncident = DateOfIncident; this.Description = Descr
$(document).ready(
function () {
var Crime = function (CaseNumber, DateOfIncident, Description) {
this.CaseNumber = CaseNumber;
this.DateOfIncident = DateOfIncident;
this.Description = Description;
}
var crimes = function (items) {
var self = this;
//Data
self.items = ko.observableArray(items)
//operations
self.addCrime = function () {
if ($("#AddCrimeForm").valid()) {
self.crime = new Crime($("#CaseNumber").val(), $("#DateOfIncident").val(), $("#Description").val());
//var JSONObj = { CaseNumber: $("#CaseNumber").val(), DateOfIncident: $("#DateOfIncident").val(), Description: $("#Description").val() };
self.items.push(this.crime);
$("#CaseNumber").val("");
$("#DateOfIncident").val("");
$("#Description").val("");
}
}
self.removeCrime = function (item) {
self.items().remove(item);
}
}
var initialData = new Array();
ko.applyBindings(crimes(initialData), $("#CrimeList")[0])
}
);
<form id="AddCrimeForm">
<div class="panel panel-success">
<div class="panel-heading">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-11">Add a crime incident to the list</div>
<div class="col-lg-1">
<button type="button" class="btn btn-success btn-xs" onclick="addCrime()"><i class="fa fa-plus"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="">
<div class="form-group">
<label class="control-label col-md-4" for="CaseNumber">Case Number</label>
<div class="col-md-8">
<input class="form-control text-box single-line" data-val="true" data-val-required="The Case Number field is required." id="CaseNumber" name="CaseNumber" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="CaseNumber" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="DateOfIncident">Date Of Incident</label>
<div class="col-md-8">
<input class="form-control text-box single-line valid" data-val="true" data-val-required="The Date of Incident field is required." id="DateOfIncident" name="DateOfIncident" type="date" value="">
<span class="field-validation-valid" data-valmsg-for="DateOfIncident" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label col-md-4" for="Description">Description</label>
<div class="col-md-8">
<textarea class="form-control text-box multi-line" data-val="true" data-val-required="The Description field is required." id="Description" name="Description"></textarea>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<table class="table table-striped table-hover " id="CrimeList">
<thead>
<tr>
<th>Case Number</th>
<th>Date of Incident</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: $data.CaseNumber" class="col-lg-2">Column content</td>
<td data-bind="text: $data.DateOfIncident" class="col-lg-2">Column content</td>
<td data-bind="text: $data.Description" style="text-wrap: normal" class="col-lg-7">Column content</td>
@*<td></td>
<td></td>
<td></td>*@
<td style="text-align: center" class="col-lg-1">
<a href="#" data-bind="click: $root.removeCrime()"><i class="fa fa-trash-o"></i> Remove</a>
</td>
</tr>
</tbody>
</table>
现在，我不确定这里的问题是什么，因为我应该绑定到根，因为removeCrime方法驻留在ViewModel的根中？您正在窗口对象上设置removeCrime函数，因为函数在全局范围内执行，这指向窗口
设置viewModel时尝试使用new关键字。这将创建新对象并将其设置为。 如果要在敲除之外调用add方法，还应该将其附加到窗口。
另一个错误是，您在JS数组上调用remove，而不是在observable数组上调用remove。 以下是工作代码：
$(document).ready(
function () {
var Crime = function (CaseNumber, DateOfIncident, Description) {
this.CaseNumber = CaseNumber;
this.DateOfIncident = DateOfIncident;
this.Description = Description;
}
var crimes = function (items) {
var self = this;
//Data
self.items = ko.observableArray(items)
//operations
window.addCrime = function () {
if ($("#AddCrimeForm")) {
crime = new Crime($("#CaseNumber").val(), $("#DateOfIncident").val(), $("#Description").val());
//var JSONObj = { CaseNumber: $("#CaseNumber").val(), DateOfIncident: $("#DateOfIncident").val(), Description: $("#Description").val() };
self.items.push(this.crime);
$("#CaseNumber").val("");
$("#DateOfIncident").val("");
$("#Description").val("");
}
}
self.removeCrime = function (item) {
self.items.remove(item);
}
}
var initialData = new Array();
ko.applyBindings(new crimes(initialData), $("#CrimeList")[0])
}
);
我检查了你的代码，据我说你错过了击倒的真正力量。如果您使用的是knockout，那么我认为没有必要使用jquery选择器访问输入字段的值 我已经创建了一个js小提琴，请检查： javascript代码将类似于：
function crimeRecord(data)
{
var self = this;
self.caseNumber = data.CaseNumber;
self.dateOfIncident = data.DateOfIncident;
self.description = data.Description;
}
//Main view model
function viewModel()
{
var self = this;
self.crimeRecords = ko.observableArray();
self.newCrimeRecord = ko.observable(new crimeRecord({}));
self.addRecord = function(){
self.crimeRecords.push(self.newCrimeRecord());
self.newCrimeRecord(new crimeRecord({}));
};
self.removeRecord = function(record){
self.crimeRecords.remove(record);
};
}
$(function(){
ko.applyBindings(new viewModel());
});
....
self.addRecord = function(){
if($("form").valid())
{
self.crimeRecords.push(self.newCrimeRecord());
self.newCrimeRecord(new crimeRecord({}));
}
else
$("form").showErrors();
};
...
或者你可以使用 谢谢你。我会检查一下，然后再给你回复。自从我在JS中做了任何事情后，我的JS已经生锈了好几年了，所以我很感谢你的建议。另一个错误是你在JS数组上调用remove，而不是在observable数组上。我同意。在设置viewModel时尝试使用new关键字。这将创建新对象并将其设置为。如果要在敲除之外调用add方法，还应该将其附加到窗口。来自CSharp的背景，我在JavaScript的上下文和范围方面遇到了困难。如果你能推荐这方面的好阅读材料，我将不胜感激；应该是有帮助的：谢谢。我会看一看，然后再回复您我很感谢您对Knockout的正确用法的评论，但是，我不确定这对于新记录字段上应该进行的不引人注目的JQuery验证会有什么影响。只有在验证新记录字段后，才能将记录添加到列表中。重写验证目前不是一个选项。另外，我不明白的是，为什么需要创建newCrimeRecord属性，该属性仅在创建记录时临时使用？我知道它消除了使用JQuery访问输入字段值的需要。但对我来说，这似乎有点像黑客——并不真正符合面向对象的意图。也许可以澄清这一点，或者链接到解释这一点的资源？newCrimeRecord属性只是用来保存将要添加到列表中的新记录对象，现在，如果您想在使用新创建的对象之前或之后执行任何操作，例如验证或其他操作，而不是简单地使用手头的单个属性。我觉得这里面没有黑客。我很感谢你的反馈。