Knock out- css binding to highlight areas with no text in them - css

Question

I'm currently working on making a contacts editor but dont fully understand the knockout conditional css binding. Basically what i would like to have happen is when you click the Add employee button two text boxes are created to add a first and last name. I would like those fields to be highlighted using the knockout conditional css binding . I would like the same thing to happen when clicking the add number option.
here is my code
and a fiddle http://jsfiddle.net/grahamwalsh/c2fmnoub/
html
<div data-bind="if:!loaded()"> Loading...Please Wait</div>
<div class='NbiEmployees'data-bind="if:loaded()">
<h2>NBI Employees</h2>
<h3>NBI has <span data-bind="text: employees().length"></span> Employees</h3>
<div id='employeesList'>
<table class='employeesEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>
<tbody data-bind="foreach: employees">
<tr>
<td>
<input data-bind='value: firstName' />
<div><a href='#' data-bind='click: $root.removeEmployee'>Delete</a></div>
</td>
<td><input data-bind='value: lastName' /></td>
<td>
<table>
<tbody data-bind="foreach: phones">
<tr>
<td><input data-bind='value: type' /></td>
<td><input data-bind='value: number' /></td>
<td><a href='#' data-bind='click: $root.removePhone'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addPhone'>Add number</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addEmployee'>Add an Employee</button>
<button data-bind='click: save, enable: employees().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
css
body { font-family: arial; font-size: 14px; }
.NbiEmployees { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.NbiEmployees input { font-family: Arial; }
.NbiEmployees b { font-weight: bold; }
.NbiEmployees p { margin-top: 0.9em; margin-bottom: 0.9em; }
.NbiEmployees select[multiple] { width: 100%; height: 8em; }
.NbiEmployees h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }
.NbiEmployees TR { vertical-align: top; }
.NbiEmployees TABLE, .NbiEmployees TD, .NbiEmployees TH { padding: 0.2em; border-width: 0; margin: 0; }
.NbiEmployees TD A { font-size: 0.8em; text-decoration: none; }
.NbiEmployees table.contactsEditor > tbody > TR { border-bottom: 1px solid silver; }
.NbiEmployees td input { width: 8em; }
li { list-style-type: disc; margin-left: 20px; }
Knockout
var EmployeesModel = function () {
var self = this;
self.employees = ko.observableArray(
);
self.loaded = ko.observable(false);
self.loadData = function loadData() {
self.loaded(false);
setTimeout(function () {
var data = [
{
firstName: "Graham", lastName: "Walsh", phones: [
{ type: "Office", number: "[phone]" },
{ type: "Mobile", number: "[phone]" }]
},
{
firstName: "Kimi", lastName: "Shirasaki", phones: [
{ type: "Office", number: "[phone]" },
{ type: "Mobile", number: "[phone]" }]
}
];
self.employees(ko.utils.arrayMap(data, function (employee) {
return {
firstName: employee.firstName,
lastName: employee.lastName,
phones: ko.observableArray(employee.phones)
};
}));
self.loaded(true);
}, 5000);
};
self.addEmployee = function () {
self.employees.push({
firstName: "",
lastName: "",
phones: ko.observableArray()
});
};
self.removeEmployee = function (employee) {
self.employees.remove(employee);
};
self.addPhone = function (employee) {
employee.phones.push({
type: "",
number: ""
});
};
self.removePhone = function (phone) {
$.each(self.employees(), function () { this.phones.remove(phone) })
};
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.employees), null, 2));
};
self.lastSavedJson = ko.observable("")
self.loadData();
};
$(document).ready(function () {
ko.applyBindings(new EmployeesModel());
});

Answer 1

If you add something like this to the 'required' fields:
<input data-bind='value: firstName, css: {warn: !firstName()}' />
and then define your warn class:
.warn {
border-color: red;
}
then the field will be highlighted. However, for this to work, the fields have to be observable:
http://jsfiddle.net/c2fmnoub/14/
here, I've created an Employee() class with observable fields (except for the phone number, which can also be observable if needed), of which a new one needs to be created when calling the addEmployee() function
Edit: the phone number:
http://jsfiddle.net/c2fmnoub/16/
in the same way I defined an Employee object with observable fields, I defined a Phone object with observable fields. This should have been a simple extension for the OP to have done. I really hope I didn't just do your homework for you.