添加css运行时到表格行和数据绑定行

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个复选框被选中。我试图做到的，是

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