Добавить css runtime в строку таблицы и данные привязать строку

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> 

вид модели My ниже

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

Теперь, когда пользователь нажимает на кнопку Update снова загружать данные и теперь 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);