CSS运行时添加到表行和数据绑定行(Add css runtime to table row and

我真的不知道如何解决。但是我是相当接近的解决方案，现在只需要您的专家在这里一个小的帮助。我的工作小提琴是在这里。当页面加载2个复选框被选中。我的观点是绑定如下

 <tbody data-bind="foreach: dataOne">
    <tr  data-bind="css: { 'makeBold': $root.duplicates.indexOf(name1) !== -1 }" >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input type="checkbox" data-bind="checked: $root.duplicates.indexOf(name1) !== -1" />
        </td>
    </tr>
</tbody>

我的观点如下模型

var data1 = [{
name1: "one",
id: 1,
display: "Test1"
}, {
 name1: "two",
id: 2,
 display: "Test2"
}, {
name1: "three",
id: 3,
 display: "Test3"
}];
var data2 = [{
name2: "five"
}, {
name2: "two"
}, {
name2: "three"
}];

var viewModel = {
dataOne: ko.observableArray(data1),
dataTwo: ko.observableArray(data2),
duplicates: ko.observableArray()

};

 viewModel.dataTwo.push({
  name: "four"
  }); //add one on the end

  var flattenedOne = ko.utils.arrayMap(viewModel.dataOne(), function (item) {

     return item.name1;
   });

  var flattenedTwo = ko.utils.arrayMap(viewModel.dataTwo(), function (item) {

   return item.name2;
  });

  var differences = ko.utils.compareArrays(flattenedOne, flattenedTwo);
    //return a flat list of differences
  ko.utils.arrayForEach(differences, function (difference) {
   if (difference.status === 'retained') {
      viewModel.duplicates.push(difference.value);
    }
   });

现在，当上更新按钮，用户点击它再次加载数据，现在3个复选框被选中。我试图做到的，是

当用户点击更新按钮应该添加CSS表行，不仅使该行大胆。
它不应该选中复选框为选中当用户点击的上更新按钮。

所以，在我们的例子，当用户点击的上更新按钮，它应该排大胆，但没有复选框应进行检查。因此，只有第一行会在点击更新按钮大胆。目前，当网页加载它正在2行大胆，并检查这是不对的。它应该排大胆只有点击更新按钮。请帮我家伙。

希望这能解决你的问题。

检查这个小提琴

I have given separate condition using another observable .

HTML： -

<table>
<tbody data-bind="foreach: dataOne">
    <tr  data-bind="css: { 'makeBold': $root.duplicates.indexOf(name1) !== -1 }" >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input type="checkbox" data-bind="checked: $root.checkDuplicate.indexOf(name1) !== -1" />
        </td>
    </tr>
</tbody>
</table>
<button class="btn" data-bind="click: $root.UpdateData"> Update </button>

脚本：-

 var data1 = [{
  name1: "one",
  id: 1,
  display: "Test1"
 }, {
  name1: "two",
  id: 2,
  display: "Test2"
 }, {
  name1: "three",
  id: 3,
  display: "Test3"
 }];
var data2 = [{
  name2: "five"
 }, {
 name2: "two"
 }, {
  name2: "three"
 }];

var viewModel = {
 dataOne: ko.observableArray(data1),
 dataTwo: ko.observableArray(data2),
 duplicates: ko.observableArray(),
 checkDuplicate : ko.observableArray() // new observable to handle condition

};


viewModel.UpdateData = function(){
  data2 = [{
     name2: "one"
  }, {
     name2: "two"
  }, {
     name2: "three"
  }];

 viewModel.dataTwo(data2);

 var flattenedOne = ko.utils.arrayMap(viewModel.dataOne(), function (item) {

   return item.name1;
 });

 var flattenedTwo = ko.utils.arrayMap(viewModel.dataTwo(), function (item) {
   return item.name2;
 });

 var differences = ko.utils.compareArrays(flattenedOne, flattenedTwo);
//return a flat list of differences
ko.utils.arrayForEach(differences, function (difference) {

  if (difference.status === 'retained' && viewModel.checkDuplicate().indexOf(difference.value) == -1 ) {
     viewModel.duplicates.push(difference.value);
  }
  });

};   


viewModel.dataTwo.push({
  name: "four"
 }); //add one on the end

 var flattenedOne = ko.utils.arrayMap(viewModel.dataOne(), function (item) {
  return item.name1;
 });

 var flattenedTwo = ko.utils.arrayMap(viewModel.dataTwo(), function (item) {
  return item.name2;
 });

  var differences = ko.utils.compareArrays(flattenedOne, flattenedTwo);
   //return a flat list of differences
  ko.utils.arrayForEach(differences, function (difference) {
    if (difference.status === 'retained') {
      viewModel.checkDuplicate.push(difference.value);
    }
  });

 ko.applyBindings(viewModel);