We Keep Coding

Knockout validation with the observable arrays

I have a scenario where a user enters different users with details. I have text boxes for different fields for each user. I need to let user save the details if at least one field must be filled by user rather than all the fields for each row. No row should be completely empty. Here is a fiddle i am trying
on save i just need to ask user to enter only one value per row.Instead of asking for all the fields required.
http://jsfiddle.net/KHFn8/7161/
var NameModel = function(names) {
var self = this;
self.names = ko.observableArray(names);
self.addName = function() {
self.names.push(new xyz());
};
self.removeName = function(name) {
self.names.remove(name);
};
if (names != null)
self.names(names);
};
var xyz = function() {
var self = this;
self.FirstName = ko.observable().extend({
required: true
});
self.MiddleName = ko.observable().extend({
required: true
});
self.LastName = ko.observable().extend({
required: true
});
self.Gender = ko.observable().extend({
required: true
});
self.NameSuffix = ko.observable().extend({
required: true
});
};
ko.validation.init({
grouping: { deep: true, observable: true, live: true },
messagesOnModified: false
});
ViewModel = function() {
this.nameModel = new NameModel();
this.save = function() {
if (
this.errors().length == 0)
alert('Everything is valid, we can save!');
else if (
!this.nameModel.isValid())
alert('You must have at least one valid item ');
}
};
ko.applyBindings(new ViewModel());
<div data-bind="with: nameModel" class="panel-body">
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>FirstName</th>
<th>MiddleName</th>
<th>LastName</th>
<th>Gender</th>
<th>NameSuffix</th>
</tr>
</thead>
<tbody data-bind="foreach: names">
<tr>
<td>
<input class="form-control" data-bind="value: FirstName" />
</td>
<td>
<input class="form-control" data-bind="value: MiddleName" />
</td>
<td>
<input class="form-control" data-bind="value: LastName" />
</td>
<td>
<input class="form-control" data-bind="value: Gender" />
</td>
<td>
<input class="form-control" data-bind="value: NameSuffix" />
</td>
<td style="vertical-align: inherit;">Delete</td>
</tr>
</tbody>
</table>
<button class="btn btn-success btn-sm" data-bind="click: addName.bind($data)">Add Name</button>
</div>
<button id="saveButton" type="button" class="btn btn-primary btn-company pull-left" data-bind="click: save">
Save
<span class="glyphicon glyphicon-download-alt"> </span>
</button>

There are some user-contributed KO-validation rules here:
https://github.com/Knockout-Contrib/Knockout-Validation/wiki/User-Contributed-Rules
This includes a rule for 'requires One Of', which will do what you want. However, I found the latest version on that page to be a bit buggy so I used a version from a project a did a while ago and applied it to your fiddle. The result is here:
http://jsfiddle.net/4f8s93k4/1/
The plugin is at the top of the JS and looks like:
ko.validation.rules['requiresOneOf'] = {
getValue: function (o) {
return (typeof o === 'function' ? o() : o);
},
validator: function (val, fields) {
var self = this;
var result = false;
ko.utils.arrayForEach(fields, function (field) {
var val = self.getValue(field);
if (val) {
result = true;
}
});
return result;
},
message: 'You must fill in at least one of these fields'
};
Rather than apply it to every one of your observables, I applied it using a single validation message, just to reduce code a bit:
self.requiresOneValidation = ko.observable().extend({
requiresOneOf: [self.FirstName, self.MiddleName, self.LastName, self.Gender, self.NameSuffix]
})
This then appears in your HTML like this:
<tr>
<td colspan="6">
<span data-bind="validationMessage: requiresOneValidation"></span>
</td>
</tr>

Computed property based of external array Knockout JS

I just starting out with Knockout and running through a pluralsite course.
I have a (presumably basic) question about a computed property based on the parent array:
Given the below code how do I make it work so that the Amount property for each item in my.vm.attendees is always the totalCost divided by number of attendees. E.g. with 4 attendees in the collection amount for each should be 25.
This should be automatically updated as you add and remove items.
<script type="text/javascript">
$(function () {
var total = 100;
//Attendee construction
my.Attendee = function () {
this.Name = ko.observable();
this.Amount = ko.computed(function () {
return total / this.numberOfAttendees;
}, my.vm);
};
my.vm = {
//observable array of attendees
attendees: ko.observableArray([new my.Attendee()]),
addAttendee: function () {
my.vm.attendees.push(new my.Attendee());
},
numberOfAttendees: function () {
my.vm.attendees.lenght + 1; //zero based
}
}
ko.applyBindings(my.vm);
});
</script>

I would probably do something like this.
function attendee(name, amount) {
var self = this;
this.name = ko.observable(name);
this.amount = ko.observable(amount);
}
function model() {
var self = this;
this.attendees = ko.observableArray();
this.total = ko.computed(function() {
var total = 0;
ko.utils.arrayForEach(this.attendees(), function(item) {
var value = parseFloat(item.amount());
if (!isNaN(value)) {
total += value;
}
});
return total.toFixed(2);
}, this);
this.average = ko.pureComputed(function() {
return self.total() / self.attendees().length;
}, this);
this.remove = function(row) {
self.attendees.remove(row);
}
this.name = ko.observable('');
this.amount = ko.observable('');
this.add = function() {
self.attendees.push(new attendee(self.name(), self.amount()));
self.amount('');
self.name('');
}
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
mymodel.attendees.push(new attendee('Bob', 25));
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
<td>Delete</td>
</tr>
</thead>
<tbody data-bind="foreach: attendees">
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:amount"></td>
<td>
<button class="btn btn-danger" data-bind="click: $parent.remove">
X
</button>
</td>
</tr>
</tbody>
<tfooter>
<tr>
<td colspan=2>Average:
<span data-bind="text:average">
</span>
</td>
</tr>
</tfooter>
</table>
<form class="form form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="enter name" data-bind="textInput: name">
<label class="sr-only" for="inlineFormInputGroup">Amount</label>
<div class="input-group ">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="amount" data-bind="textInput: amount">
</div>
<button type="buttont" class="btn btn-primary" data-bind="click: add">add row </button>
</form>

The "Amount" computed will be recalculated whenever any child observables are updated. Therefore you'll need to make "total" an observable if you want it to trigger a change, and you'll need to make "numberOfAttendees" a computed itself so that it can update when my.vm.attendees gets updated, and that can then cascade to an update of the "Amount" computed.

Knockout binding for array is not recognized

I am having an issue with my knockout not being recognized in html:
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<fieldset>
<legend>Rates</legend>
<div id="creditcards-rates" class="row-fluid">
<p data-bind="visible: rates() == undefined || rates().length == 0">
No rates added yet.
</p>
<table data-bind="visible: rates() !== undefined && rates().length > 0" class="table table-striped table-condensed">
<thead>
<tr>
<th>Payment Status</th>
<th>Income Amount</th>
<th>Confirmed by Provider</th>
<th>Payment Status</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: rates">
<tr>
<td>
<input type="hidden" data-bind="value: Id, attr: { id: 'Rates[' + $index() + '].Id', name: 'Rates[' + $index() + '].Id' }" />
</td>
<td>
<a id="btn-remove" data-bind="click: $root.removeRate"><i class="icon icon-minus"></i></a>
</td>
</tr>
</tbody>
</table>
<button class="btn" data-bind="click: addNewRate"><i class="icon icon-plus"></i> Add New Payment</button>
</div>
</fieldset>
</div>
</div>
</div>
Problem is where data-bind doesn't recognize the values. I get error in console:
Error: Syntax error, unrecognized expression: input[data-bind='value:
Id, attr: { id: 'Rates[' + $index() + '].Id', name: 'Rates[' +
$index() + '].Id' }']
...);return a},bc.error=function(a){throw new Error("Syntax error,
unrecognized exp...
My knockout is:
var Micki = Micki || {};
Micki.Electro = {
Edit: function (options) {
var settings = $.extend({
id: 0
}, options);
var _alerts;
var _rates;
var vm;
function init(alerts, rates) {
_alerts = alerts;
_rates = rates;
vm = new ViewModel();
ko.applyBindings(vm);
function ViewModel(options) {
var self = this;
self.mediator = null;
self.publishKey = options.publishKey;
self.rates = ko.observableArray([]);
self.init = function (mediator, alerts, rates) {
self.mediator = mediator;
self.alerts = alerts;
//Rates.
$.each(rates, function (index, rate) {
var _rate = {
Id: ko.observable(rate.Id),
PaymentType: ko.observable(rate.PaymentType),
IncomeAmount: ko.observable(rate.IncomeAmount),
ConfirmedDate: ko.observable(rate.ConfirmedDate),
PaymentStatus: ko.observable(rate.PaymentStatus),
Note: ko.observable(rate.Note)
};
self.rates.push(_rate);
});
self.container.on("change keypress paste focus textInput input", function () {
self.mediator.publish(self.publishKey);
});
};
self.initFields = function () {
self.fields = [];
_.each($("[name^='Rates']"), function (field) {
self.fields.push(new Crate.Core.Field($(field), self.mediator, self.publishKey));
});
//_ratesAndTiers.initFields();
//_campaignSpecific.initFields();
};
self.addNewRate = function (data, event) {
alert("test");
};
return self;
}
}
}
}

KnockoutJS Data disappears when I add a new item to array

View the issue on jsfiddle: http://jsfiddle.net/6bFsY/3/
When you click "Add Users" and then click "Add Users" again all of the data in the extensions drop down field disappears. This happened after I added an email column.
The email field gets pre-populated with whatever is selected in the extension dropdown (email is part of its object).
Also, the extensions drop down is unique per line, part of the script tells it to remove it from the array if it exists on a previous line.
JS
window.usrViewModel = new function () {
var self = this;
window.viewModel = self;
self.list = ko.observableArray();
self.pageSize = ko.observable(10);
self.pageIndex = ko.observable(0);
self.selectedItem = ko.observable();
self.extData = ko.observableArray();
self.validAccess = [{
'name': 'No Access',
'id': 'none'
}, {
'name': 'System Settings',
'id': 'pbx'
}, {
'name': 'Accounting',
'id': 'billing'
}, {
'name': 'Full Administrator',
'id': 'full'
}];
self.availableExtData = ko.computed(function () {
var inUse = [];
if (!self.selectedItem()) return inUse;
ko.utils.arrayForEach(self.list(), function (item) {
if (inUse.indexOf(item.usrExtVal().extension) == -1 && self.selectedItem() != item) inUse.push(item.usrExtVal().extension);
self.selectedItem().usrEmail(self.selectedItem().usrExtVal().email);
});
return ko.utils.arrayFilter(self.extData(), function (item) {
return inUse.indexOf(item.extension) == -1;
});
});
self.edit = function (item) {
if (self.selectedItem()) self.save();
self.selectedItem(item);
};
self.cancel = function () {
self.selectedItem(null);
};
self.add = function () {
if (self.selectedItem()) self.save();
var newItem = new Users();
self.selectedItem(newItem);
self.list.push(newItem);
self.moveToPage(self.maxPageIndex());
};
self.remove = function (item) {
if (confirm('Are you sure you wish to delete this item?')) {
self.list.remove(item);
if (self.pageIndex() > self.maxPageIndex()) {
self.moveToPage(self.maxPageIndex());
}
}
$('.error').hide();
};
self.save = function () {
self.selectedItem(null);
};
self.templateToUse = function (item) {
return self.selectedItem() === item ? 'editUsrs' : 'usrItems';
};
self.pagedList = ko.dependentObservable(function () {
var size = self.pageSize();
var start = self.pageIndex() * size;
return self.list.slice(start, start + size);
});
self.maxPageIndex = ko.dependentObservable(function () {
return Math.ceil(self.list().length / self.pageSize()) - 1;
});
self.previousPage = function () {
if (self.pageIndex() > 0) {
self.pageIndex(self.pageIndex() - 1);
}
};
self.nextPage = function () {
if (self.pageIndex() < self.maxPageIndex()) {
self.pageIndex(self.pageIndex() + 1);
}
};
self.allPages = ko.dependentObservable(function () {
var pages = [];
for (i = 0; i <= self.maxPageIndex(); i++) {
pages.push({
pageNumber: (i + 1)
});
}
return pages;
});
self.moveToPage = function (index) {
self.pageIndex(index);
};
};
ko.applyBindings(usrViewModel, document.getElementById('usrForm'));
function Users(fname, lname, email, phone, access, usrExtVal, usrEmail) {
this.fname = ko.observable(fname);
this.lname = ko.observable(lname);
this.email = ko.observable(email);
this.phone = ko.observable(phone);
this.access = ko.observable(access);
this.usrExtVal = ko.observable(usrExtVal);
this.usrEmail = ko.observable(usrEmail);
}
var ajaxResultExt = [{
'extension': '123',
'name': 'Stephen',
'email': 'test#test.com'
}, {
'extension': '123',
'name': 'Stephen',
'email': 'stephen#test.com'
}];
usrViewModel.extData(ajaxResultExt);
HTML
<fieldset title="Users">
<legend>2</legend>
<div>
<div class="cbp-content">
<form id="usrForm">
<h2>Users</h2>
<table class="table table-striped table-bordered" data-bind='visible: pagedList().length > 0'>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Access</th>
<th>Extension</th>
<th>Email</th>
<th style="width: 100px; text-align:right;" />
</tr>
</thead>
<tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>
<!-- ko if: 2 > pagedList().length -->
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i> Add Users</a></p>
<!-- /ko -->
<div class="supOneUsr" style="display:none;"><i class="icon-warning-sign"></i> <span style="color:red;">Please supply at least 1 User with Administrator Rights</span></div>
<div class="pagination pull-left" data-bind='visible: pagedList().length > 0'>
<ul><li data-bind="css: { disabled: pageIndex() === 0 }">Previous</li></ul>
<ul data-bind="foreach: allPages">
<li data-bind="css: { active: $data.pageNumber === ($root.pageIndex() + 1) }"></li>
</ul>
<ul><li data-bind="css: { disabled: pageIndex() === maxPageIndex() }">Next</li></ul>
</div>
<br clear="all" />
<script id="usrItems" type="text/html">
<tr>
<td data-bind="text: fname"></td>
<td data-bind="text: lname"></td>
<td data-bind="text: phone"></td>
<td data-bind="text: access.asObject && access.asObject() && access.asObject().name"></td>
<td data-bind="text: usrExtVal().extension"></td>
<td data-bind="text: usrEmail"></td>
<td class="buttons">
<a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-edit"></i></a>
<a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
<script id="editUsrs" type="text/html">
<tr>
<td><input data-errorposition="b" class="required" name="fname" data-bind="value: fname" /></td>
<td><input data-errorposition="b" class="required" name="lname" data-bind="value: lname" /></td>
<td><input data-errorposition="b" class="required" name="phone" data-bind="value: phone" /></td>
<td><select class="accessSelect" data-bind="options: $root.validAccess, optionsText: 'name', optionsValue: 'id', value: access, valueAsObject: 'asObject'"></select></td>
<td><select id="extData" data-bind="options: $root.availableExtData, optionsText: 'extension', value: usrExtVal"></select></td>
<td><input id="extEmail" data-errorposition="b" class="required" name="email" data-bind="value: usrEmail" /></td>
<td class="buttons">
<a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
<a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
</form>
</div>
</div>
</fieldset>

There are a few problems in your code.
availableExtData tries to access subproperties of usrExtVal, which is sometimes undefined. That access causes an error, which prevents further execution of the computed. So you need to first check if usrExtVal is set.
You have two entries in ajaxResultExt, but they both have the same extension. So once you've selected 123 for the first item, there aren't any left for the second, because both 123 values will be removed. So your extensions need to be unique.
You're updating usrEmail within a loop in availableExtData, which doesn't make any sense. It should be in a separate ko.computed.
Here is your example with these fixes: http://jsfiddle.net/mbest/6bFsY/5/

knockoutjs observablearray make individual item observable

i was looking # 2'nd tutorial "Working with lists and colection" on Knockoutjs.com: http://learn.knockoutjs.com/#/?tutorial=collections
Here's HTML:
Your seat reservations ()
<table>
<thead><tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<!-- Todo: Generate table body -->
<tbody data-bind="foreach: seats">
<tr>
<td> <input data-bind="value: name()"/></td>
<td> <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
<td data-bind="text: formatterPrice"></td>
<!--<td> Remove</td>-->
<td> <button data-bind="click: $root.removeSeat">Remove</button></td>
</tr>
</tbody>
</table>
<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>
<h3 data-bind="visible: totalSurcharge() > 0">
Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
</h3>
<span data-bind="text: seats()[0].name()" ></span> <br/>
<span data-bind="text: seats()[0].meal().mealName" />
Here's ViewModel:
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = ko.observable(name);
self.meal = ko.observable(initialMeal);
self.formatterPrice = ko.computed(function() {
var price = self.meal().price;
return price ? "$" + price.toFixed(2) : "None";
});
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.958989 },
{ mealName: "Ultimate (whole zebra)", price: 290.00000 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[1])
]);
self.addSeat = function() {
self.seats.push(new SeatReservation("Steve", self.availableMeals[2]))
};
self.removeSeat = function(seat) {
self.seats.remove(seat);
}
self.totalSurcharge = ko.computed(function() {
var total = 0;
for(var i = 0; i < self.seats().length; i++) {
total += self.seats()[i].meal().price;
}
// alert(total);
return total;
});
}
ko.applyBindings(new ReservationsViewModel());
When i try to change "name" in textbox, my observableArray (seats) doesn't seem to change. Still my span # bottom shows "Steve" if i try to change first row's textbox.
I've made name() as observable same as meal, and if i change meal (dropdown), my observableArray (seats) seems working.
Please help!

at
<td> <input data-bind="value: name()"/></td>
use <td> <input data-bind="value: name"/></td>
and at <span data-bind="text: seats()[0].name()" ></span> <br/> you want <span data-bind="text: seats()[0].name" ></span> <br/>