jquery - 将 css 运行时添加到表行和数据绑定(bind)行

Question

我真的不知道怎么解决。但是，我非常接近解决方案，现在只需要这里的专家提供一点帮助。我的工作 fiddle 是 here .当页面加载时，会选中 2 个复选框。我的 View 绑定(bind)如下

 <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>

我的 View 模型如下

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 个复选框。我想要实现的是

1. 当用户点击更新按钮时，它应该将 css 添加到表格行并且只将该行设为粗体。

2. 当用户点击更新按钮时，它不应该选中复选框。

因此在我们的示例中，当用户单击更新按钮时，它应该使行显示为粗体，但不应选中复选框。所以只有第一行会在点击更新按钮时加粗。目前，当页面加载时，它会将 2 行加粗并检查哪个是错误的。它应该只点击更新按钮使行变粗。请帮帮我。

Answer 1

希望这能解决您的问题。

检查这个Fiddle

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);