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