javascript - knockout 模型 : Challenge in Knockout Checkbox

Question

我有一个 knockout 模型。我希望选择复选框，然后复选框上应出现勾号。 到目前为止，我已经实现了单击行并勾选复选框，但是当我单击复选框时，行会突出显示，但复选框不会被选中。

请找到我迄今为止构建的 fiddle Fiddle

引用代码。

<input type="text" id="searchboxSample" name="lname" required
                                                   placeholder="searchboxSample" />
<table id="devtable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: paginated" >

    <tr data-bind="click: $parent.select, css: {flash: $parent.selected() === $data}">
    <td width="15"><input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selected() === $data" /></td>
      <td data-bind="text: ID"></td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Status"></td>
    </tr>
  </tbody>
</table>ID :
<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />
<br>
<input type="button" value="Send" disabled/>

<input type="button" value="ChangeModelData" data-bind="click: changeTableData">
<input type="text" id="lname" name="lname" required
                                                   placeholder="Nachname" data-bind="value: acceptedSymptom , event: {keyup: showMessage}"/>
<div class="pager">
 <a href="#" class="firstpage" data-bind="click: firstpage, visible: hasPrevious">&le;</a>
    <a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">&le;</a>
    <span class="current" data-bind="text: $root.pageNumber"></span>
    <a href="#" class="next" data-bind="click: next, visible: hasNext">&gt;</a>
  <a href="#" class="lastpage" data-bind="click: lastpage, visible: hasNext">&ge;</a>
</div>

Answer 1

发生这种情况是因为点击事件从子级“冒泡”到父级。了解它 here 。

为了防止这种情况发生，您需要添加 clickBubble 绑定(bind)以及具有相同函数 $parent.select 的 click 绑定(bind)。

您现有的行 $parent.check 无效，因为它没有指向 JS 中的任何内容。

这是JSfiddle ，以及这里的实现:

var RowModel = function(id, name, status) {
this.ID = ko.observable(id);
  this.Name = ko.observable(name);
  this.Status = ko.observable(status);
   
};

RowModel.fromRawDataPoint = function(dataPoint) {
  return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};

var myData = [{
  id: "001",
  name: "Jhon",
  status: "Single"
}, {
  id: "002",
  name: "Mike",
  status: "Married"
}, {
  id: "003",
  name: "Marrie",
  status: "Complicated"
},{
  id: "004",
  name: "Jhon",
  status: "Single"
}, {
  id: "005",
  name: "Mike",
  status: "Married"
}, {
  id: "006",
  name: "Marrie",
  status: "Complicated"
}, {
  id: "007",
  name: "Mike",
  status: "Married"
}, {
  id: "008",
  name: "Marrie",
  status: "Complicated"
}, {
  id: "009",
  name: "Mike",
  status: "Married"
}, {
  id: "010",
  name: "Marrie",
  status: "Complicated"
}
];

function MyVM(data) {
  var self = this;
  
  /*************
  Start of logic for Paging
  
  ******/
  
  
  self.items = ko.observableArray();
   this.all =  self.items;

 self.pageNumber = ko.observable(0);
    self.nbPerPage = 2;
    
    // I think this is somewhere I am missing the functionality.
    
    this.totalPages = ko.computed(function() {
		var div = Math.floor(self.all().length / self.nbPerPage);
		div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
		return div - 1;
	});

this.paginated = ko.computed(function() {
        var first = self.pageNumber() * self.nbPerPage;
        return self.all.slice(first, first + self.nbPerPage);
    });
    
    this.hasPrevious = ko.computed(function() {
		return self.pageNumber() !== 0;
	});
  
  	this.hasNext = ko.computed(function() {
		return self.pageNumber() !== self.totalPages();
	});
  
  this.next = function() {
  	self.deselect();
		if(self.pageNumber() < self.totalPages()) {
			self.pageNumber(self.pageNumber() + 1);
		}
	}
  
  this.lastpage = function() {
  	self.deselect();
		if(self.pageNumber() < self.totalPages()) {
			self.pageNumber(self.totalPages());
		}
	}
  
  
  this.firstpage = function() {
  	self.deselect();
		if(self.pageNumber() != 0) {
			self.pageNumber(self.pageNumber()-self.pageNumber());
      alert(self.pageNumber());
		}
	}
  
  this.previous = function() {
    self.deselect();
		if(self.pageNumber() != 0) {
			self.pageNumber(self.pageNumber() - 1);
		}
	}  


/***********
End of Logic for Paging

*/

	self.loadData(data);
  
  self.deselect = function(){
  	self.selected(null);
    self.enableEdit(false);
  };
        
  self.select = function(item) {
    if (item === self.selected()) {
    self.selected(null);
    self.enableEdit(false);
  } else {
    self.selected(item);
    self.enableEdit(true);
  }   
  }; 

  self.acceptedSymptom=ko.observable();

	
  
  self.selected = ko.observable(self.items()[0]);
  self.selectedID=ko.observable(self.items()[0].ID());
  self.selectedName=ko.observable(self.items()[0].Name());
  self.selectedStatus=ko.observable(self.items()[0].Status());
  
  self.selected.subscribe(function(newValue){
    if (newValue === null){
        self.selectedID(null);
        self.selectedName(null);
        self.selectedStatus(null);
        return;
    }
  	if (typeof newValue !== 'undefined'){
    	self.selectedID(newValue.ID());
      self.selectedName(newValue.Name());
      self.selectedStatus(newValue.Status());
    }
  });
  
  
  
  self.FirstName = ko.observable();

  self.FirstName.focused = ko.observable();
  
  var i =0;
  self.FirstName.focused.subscribe(function(newValue, data) {

if(newValue){
i++;
//alert(newValue + " let's check data " + i);
}
   if (!newValue) {
       //do validation logic here and set any validation observables as necessary
       if(i>0){
       alert(newValue + " let's check data" + i);
       i=0;
       }    
       
   }  
  
});

 self.enableEdit = ko.observable(false); 

 self.changeTableData = function() {

      self.loadData([{
        id: "111",
        name: "ABC",
        status: "Single"
      }, {
        id: "222",
        name: "XYZ",
        status: "Married"
      }, {
        id: "333",
        name: "PQR",
        status: "Complicated"
      }, {
        id: "444",
        name: "PQR",
        status: "Complicated"
      }, {
        id: "555",
        name: "PQR",
        status: "Complicated"
      }, {
        id: "666",
        name: "PQR",
        status: "Complicated"
      }, {
        id: "777",
        name: "PQR",
        status: "Complicated"
      }, {
        id: "888",
        name: "PQR",
        status: "Complicated"
      }
      ]);
    }
  

 self.showMessage = function(data,event){
if (event.keyCode !== 13){
alert("Entered key is not a Enter");
}else{
      self.loadData([{
        id: "111",
        name: "ABC",
        status: "Single"
      }, {
        id: "222",
        name: "XYZ",
        status: "Married"
      }, {
        id: "3333",
        name: "PQR",
        status: "Complicated"
      }]);
      alert("You are on right Track.");
      alert(self.acceptedSymptom(''))
    }

} 
  
}
MyVM.prototype.loadData = function(rawData) {
  this.items(rawData.map(RowModel.fromRawDataPoint));
  this.all(this.items());
  this.pageNumber(0);
};
ko.applyBindings(new MyVM(myData));

#devtable {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


#devtable th {
border-top: 1px solid #dddddd;
border-bottom:1px solid #dddddd;
background-color: #f0f0f5

}
#devtable td {
border-bottom:1px solid #dddddd;
}


#devtable td, #devtable th {    
    text-align: left;
    padding: 8px;
}

.flash { background-color: #b6bcdb; }

.previous{text-decoration: none;}

.previous {
    background-color: #f1f1f1;
    color: black;
}


.next{text-decoration: none; }
.lastpage{text-decoration: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" id="searchboxSample" name="lname" required
                                                   placeholder="searchboxSample" />
 
<input type="checkbox" />
<table id="devtable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: paginated" >
 
    <tr data-bind="click: $parent.select, css: {flash: $parent.selected() === $data}">
    <td width="15"><input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selected() === $data, click: function(){$parent.select($data); return true}, clickBubble: false" /></td>
      <td data-bind="text: ID"></td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Status"></td>
    </tr>
  </tbody>
</table>ID :
<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />
<br>
<input type="button" value="Send" disabled/>

<input type="button" value="ChangeModelData" data-bind="click: changeTableData">
<input type="text" id="lname" name="lname" required
                                                   placeholder="Nachname" data-bind="value: acceptedSymptom , event: {keyup: showMessage}"/>
<div class="pager">
 <a href="#" class="firstpage" data-bind="click: firstpage, visible: hasPrevious">&le;</a>
	<a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">&le;</a>
	<span class="current" data-bind="text: $root.pageNumber"></span>
	<a href="#" class="next" data-bind="click: next, visible: hasNext">&gt;</a>
  <a href="#" class="lastpage" data-bind="click: lastpage, visible: hasNext">&ge;</a>
</div>