Question

我真的不确定如何解决。然而，我非常接近解决方案，现在只需要一位专家的小帮助。我的工作小提琴是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添加到表格行，并且只将该行加粗。
当用户点击更新按钮时，不应选中复选框。

因此，在我们的示例中，当用户单击更新按钮时，它应该将行设为粗体，但不应选中复选框。因此，单击更新按钮时，只有第一行是粗体。目前，当页面加载时，它将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);

将css运行时添加到表行，数据绑定行

1 个答案: