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

我真的不确定如何解决。但是，我已经很接近解决方案了，现在只需这里的专家们一点帮助。我的工作提琴是here。页面加载后，将选中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添加到表行，并且仅使该行变为粗体。
当用户单击更新按钮时，它不应选中该复选框。


因此，在我们的示例中，当用户单击“更新”按钮时，应将行设置为粗体，但不应选中此复选框。因此，只有第一行在单击更新按钮时才会以粗体显示。当前，当页面正在加载时，它使两行变为粗体，并检查这是错误的。仅单击更新按钮即可使行变为粗体。请帮助我。

最佳答案

希望这能解决您的问题。

选中此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);

关于jquery - 将CSS运行时添加到表行并数据绑定(bind)行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15610845/