Develop Reference

Uncaught TypeError: Unable to process binding "if" with knockout

I am simply trying to create some checkboxes and inputs that get the data from database and saving it back to database after edit. But I am getting the following error:
Uncaught TypeError: Unable to process binding "if: function(){return $root.editAlarmValues }"
Message: Unable to process binding "enable: function(){return $root.editAlarmValues().setAlarmValues() }"
Message: $root.editAlarmValues(...).setAlarmValues is not a function
I am not sure what I am doing wrong. I checked in the console and the values get mapped correctly to the array but they don't seem to bind to view. Any help will be highly appreciated!
Here is the code:
<!--ko if: $root.editAlarmValues -->
<div class="row">
<div class="col-md-6">
<input type="checkbox" data-bind="iCheck: $root.editAlarmValues().setAlarmValues" class="large-check"/>
</div>
</div>
<div class="row">
<div class="col-md-5 form-inline">
<input type="checkbox" data-bind="iCheck: $root.editAlarmValues().setOutputCurrentPPLowValue, enable: $root.editAlarmValues().setAlarmValues()" class="large-check"/>
<input type="text" id="OutputCurrentPPLowValue" data-bind="value: $root.editAlarmValues().outputCurrentPPLowValue, enable: $root.editAlarmValues().setOutputCurrentPPLowValue()" class="form-control" maxlength="30" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button type="button" class="btn btn-primary btn-flat" data-bind="event: {click: $root.editSave}">Save</button>
</div>
</div>
</div>
<!-- /ko -->
and script:
var AlarmsViewModel = function (wellID) {
function EditAlarms(setAlarmValues, setOutputCurrentPPLowValue, outputCurrentPPLowValue) {
var self = this;
self.setAlarmValues = ko.observable(setAlarmValues);
self.setOutputCurrentPPLowValue = ko.observable(setOutputCurrentPPLowValue);
self.outputCurrentPPLowValue = ko.observable(outputCurrentPPLowValue);
}
var self = this;
self.wellID = ko.observable(wellID);
self.editAlarmValues = ko.observableArray();
self.init = function () {
self.editAlarmInit();
};
self.editAlarmInit = function () {
APIHelper.getData("/api/alarmapi/EditAlarms?wellID=" + self.wellID(), self.editAlarmsCallback, "");
};
self.editAlarmsCallback = function (data) {
//Map results
var temp = $.map(data.result, function (item) {
return new EditAlarms(item.setAlarmValues, item.setOutputCurrentPPLowValue, item.outputCurrentPPLowValue);
});
self.editAlarmValues(temp);
};
self.editSave = function () {
var jsonData = ko.toJSON(self.editAlarmValues);
APIHelper.postData("/api/alarmapi/EditAlarmsPost", jsonData);
};
self.init();
};
var wellID = #ViewBag.WellID;
ko.bindingHandlers.iCheck = {
init: function (el, valueAccessor) {
var observable = valueAccessor();
$(el).on("ifChanged", function () {
observable(this.checked);
});
},
update: function (el, valueAccessor) {
var val = ko.utils.unwrapObservable(valueAccessor());
if (val) {
$(el).iCheck('check');
} else {
$(el).iCheck('uncheck');
}
}
};
var vm = new AlarmsViewModel(wellID);
ko.applyBindings(vm);

You don't want a <!-- ko if: editAlarmValues -->, you want a <!-- ko foreach: editAlarmValues -->. The foreach will not run when the target array is empty, so it fundamentally fulfills the same function.
Inside the foreach, the binding context is the EditAlarms object in question, so you should refer to its properties directly (iCheck: setOutputCurrentPPLowValue instead of iCheck: $root.editAlarmValues().setOutputCurrentPPLowValue).
Also think about your naming. EditAlarms is not a good name for a single object. The prefix set... should refer to a method that sets something. In this case it's just an observable property. setAlarmValues should be called alarmValues, and because it's not an array, it probably should actually be called alarmValue. And so on.
<!-- ko foreach: editAlarmValues -->
<div class="row">
<div class="col-md-6">
<input type="checkbox" data-bind="iCheck: setAlarmValues" class="large-check">
</div>
</div>
<div class="row">
<div class="col-md-5 form-inline">
<input type="checkbox" class="large-check" data-bind="
iCheck: setOutputCurrentPPLowValue,
enable: setAlarmValues
">
<input type="text" id="OutputCurrentPPLowValue" class="form-control" maxlength="30" data-bind="
value: outputCurrentPPLowValue,
enable: setOutputCurrentPPLowValue
">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button type="button" class="btn btn-primary btn-flat" data-bind="click: $root.editSave">Save</button>
</div>
</div>
</div>
<!-- /ko -->
Revised JS code (move the binding handler definitions to the top, don't nest viewmodels)
ko.bindingHandlers.iCheck = {
init: function (el, valueAccessor) {
var observable = valueAccessor();
$(el).on("ifChanged", function () {
observable(this.checked);
});
},
update: function (el, valueAccessor) {
var val = ko.unwap(valueAccessor());
$(el).iCheck(val ? 'check' : 'uncheck');
}
};
function EditAlarms(setAlarmValues, setOutputCurrentPPLowValue, outputCurrentPPLowValue) {
this.setAlarmValues = ko.observable(setAlarmValues);
this.setOutputCurrentPPLowValue = ko.observable(setOutputCurrentPPLowValue);
this.outputCurrentPPLowValue = ko.observable(outputCurrentPPLowValue);
}
function AlarmsViewModel(wellID) {
var self = this;
self.wellID = ko.observable(wellID);
self.editAlarmValues = ko.observableArray();
self.editAlarmInit = function () {
APIHelper.getData("/api/alarmapi/EditAlarms?wellID=" + self.wellID(), function (data) {
var alarms = data.result.map(item => new EditAlarms(
item.setAlarmValues,
item.setOutputCurrentPPLowValue,
item.outputCurrentPPLowValue
));
self.editAlarmValues(alarms);
});
};
self.editSave = function () {
APIHelper.postData("/api/alarmapi/EditAlarmsPost", ko.toJSON(self.editAlarmValues));
};
self.editAlarmInit();
}
var vm = new AlarmsViewModel(#ViewBag.WellID);
ko.applyBindings(vm);

Sending only the updated object from ko.observableArray

How can I send only the updated model from an observable Array instead of sending the entire array?
var student = function (){
this.studentId=0;
this.firstName=ko.obserable();
this.lastName=ko.obserable();
}
var course= function (){
this.courseId=0;
this.students=ko.obserableArray([]);
this.Name=ko.obserable();
}
Now I want to get only that particular student from course whose info is updated. Assuming that when we add a new class we can dynamically add new students to it on the go. Supposing that you have to validate the previous student before adding a new one. When I get that particular student I want to send that student info back to the server.
Thanks.

If I understood your task right, you could use "arrayChange" event type to get exact changed (added/removed) items:
sourceArray = ko.observableArray();
sourceArray.subscribe(function (changes) {
changes.forEach(function(arrayChange) {
if(arrayChange.status === 'added') {
// some code on add
} else if(arrayChange.status === 'deleted') {
// some code on delete
}
});
}, null, "arrayChange");

If you want to get list of students which have been modified, you can provide a flag to identify if an object has been modified in student object. Use .subscribe to modify that flag whenever a value is updated. Then use ko.computed or ko.pureComputed to get that list.
Also it supposes to be observable.
var student = function (id, firstName, lastName) {
var self = this;
self.hasChanged = ko.observable(false);
var modified = function(){
self.hasChanged(true);
};
self.studentId = ko.observable(id);
self.firstName = ko.observable(firstName);
self.firstName.subscribe(modified);
self.lastName = ko.observable(lastName);
self.lastName.subscribe(modified);
}
var course= function (){
var self = this;
self.courseId = 0;
self.students = ko.observableArray([new student(1, "Cristiano", "Ronaldo"), new student(2, "Lionel", "Messi")]);
self.modifiedStudent = ko.computed(function(){
return ko.utils.arrayFilter(self.students(), function(student) {
return student.hasChanged();
});
}, self);
self.Name = ko.observable("Programming 101");
}
$(document).ready(function () {
var myViewModel = new course();
ko.applyBindings(myViewModel);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
List of all students:
<div data-bind="foreach: students">
<div>
<span data-bind="text: studentId"></span>
<input type="text" data-bind="value: firstName" />
<input type="text" data-bind="value: lastName" />
</div>
</div>
<br/>
List of students which has been modified:
<div data-bind="foreach: modifiedStudent">
<div>
<span data-bind="text: studentId"></span>
<input type="text" data-bind="value: firstName" readonly />
<input type="text" data-bind="value: lastName" readonly />
</div>
</div>

How to use user input with filter function in Knockout.js

I have a filter function that I would like to adapt to user input, but I don't really know how to do it. I'm fairly new to Knockout so I would appreciate some help with this.
When I click the filter button (see code below) i get this in the input area:
function observable() {
if (arguments.length > 0) {
// Write
// Ignore writes if the value hasn't changed
if (observable.isDifferent(observable[observableLatestValue], arguments[0])) {
observable.valueWillMutate();
observable[observableLatestValue] = arguments[0];
observable.valueHasMutated();
return this; // Permits chained assignments
} else {
// Read
ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
return observable[observableLatestValue];
}
}
What I want to achieve is to write a value in the input area, click the button (for now, will use submit later) and have the search results filtered. The array employeeList is an observable array that is populated through an ajax call (the search function).
KO Code:
self.employeeList = ko.observableArray([]);
self.currentFilter = ko.observable();
self.filterEmpl = ko.computed(function () {
if (!self.currentFilter()) {
return self.employeeList();
} else {
return ko.utils.arrayFilter(self.employeeList(), function (employee) {
return employee.DepartmentName == self.currentFilter();
});
}
});
self.filter = function (value) {
self.currentFilter(value);
} //filter
HTML:
<form>
<input type="text" placeholder="Department" id="department" class="filterInput" data-bind="value: currentFilter" />
<button data-bind="click: function () { filter(currentFilter) }">Filter</button>
<br />
<input type="text" placeholder="Office" class="filterInput" />
<br />
<input type="text" placeholder="Skills" class="filterInput lastInput" />
</form>
Thanks!

Your filterEmpl is a ko.computed. This means it automatically updates once one of the observable values it uses is updated.
In your case, it will update whenever either self.employeeList or self.currentFilter changes.
To try this out, type one of the DepartmentNames in the example below. Once you remove focus from the input, the value data-bind updates currentFilter, and self.filterEmpl is updated.
var VM = function() {
self.employeeList = ko.observableArray([
{ DepartmentName: "Test1", Name: "Employee 1" },
{ DepartmentName: "Test2", Name: "Employee 2" }
]);
self.currentFilter = ko.observable();
self.filterEmpl = ko.computed(function() {
if (!self.currentFilter()) {
return self.employeeList();
} else {
return ko.utils.arrayFilter(self.employeeList(), function(employee) {
return employee.DepartmentName == self.currentFilter();
});
}
});
}
ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Type "Test1" or "Test2" and blur focus to filter</h2>
<form>
<input type="text" placeholder="Department" data-bind="value: currentFilter" />
</form>
<h2>All employees:</h2>
<ul data-bind="foreach: employeeList">
<li data-bind="text: Name"></li>
</ul>
<h2>Filtered employees:</h2>
<ul data-bind="foreach: filterEmpl">
<li data-bind="text: Name"></li>
</ul>
Now, if you want to filter only when a button is pressed, you don't need the ko.computed. You define a second ko.observableArray and write to it from within the filter function. Note that you don't need to pass it any arguments; the viewmodel is already aware of the currentFilter value via the value binding.
var VM = function() {
self.employeeList = ko.observableArray([
{ DepartmentName: "Test1", Name: "Employee 1" },
{ DepartmentName: "Test2", Name: "Employee 2" }
]);
self.currentFilter = ko.observable();
self.filterEmpl = ko.observableArray(self.employeeList());
self.filter = function() {
var result = self.employeeList(),
filter = self.currentFilter();
if (filter) {
result = ko.utils.arrayFilter(result, function(employee) {
return employee.DepartmentName == filter;
});
}
self.filterEmpl(result);
};
}
ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Type "Test1" or "Test2" and tap button to filter</h2>
<form>
<input type="text" placeholder="Department" data-bind="value: currentFilter" />
<button data-bind="click: filter">filter</button>
</form>
<h2>All employees:</h2>
<ul data-bind="foreach: employeeList">
<li data-bind="text: Name"></li>
</ul>
<h2>Filtered employees:</h2>
<ul data-bind="foreach: filterEmpl">
<li data-bind="text: Name"></li>
</ul>
Personally, I like to use the computed approach. You can extend the observable using the rateLimit option if performance is limiting. Ultimately, it's mostly a UX decision.
P.S. The input you did get in the input area is knockout's definition of the ko.observable function. In your <button>, you pass currentFilter without getting its value using currentFilter(). In filter, you write this to currentFilter which is data-bound to the <input>. I figured it'd be more useful to explain the two approaches, but you still might want to know where the strange input came from...

Knockout Search / Filter

I'm very new to Knockout JS and I'm having a hell of a time trying to get this project completed.
I've created a map website which displays a series of pins on the page for popular locations around town. The idea is that the search bar to the left of the page will filter out pins on the map with names that do not match the search query. There is also a "master" list on the left of the page that the search bar will filter from too.
I used an example I found on jsfiddle here: http://jsfiddle.net/mythical/XJEzc/ but I'm having troubles applying that same logic to my code.
Here it is:
HTML:
<li>
<input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</li>
<ul data-bind="template: {name:'pin', foreach: pins}"></ul>
</ul>
<script type="text/html" id="pin">
<li>
<strong data-bind="text: name"></strong>
</li>
</script>
JS:
self.pins = ko.observableArray([
new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test1"),
new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test2")
]);
self.query = ko.observable('');
self.filterPins = ko.dependentObservable(function () {
var search = self.query().toLowerCase();
return ko.utils.arrayFilter(name, function (pin) {
return pin.toLowerCase().indexOf(search) >= 0;
});
});
With the logic I've setup if the name is removed from the pin constructor it will remove it from the map.
Here is my somewhat working example: http://jamesiv.es/projects/map/

HTML
<ul data-bind="template: {name:'pin', foreach: pins}"></ul>
change to
<ul data-bind="template: {name:'pin', foreach: filterPins}"></ul>
Javascript
self.filterPins = ko.dependentObservable(function () {
var search = self.query().toLowerCase();
return ko.utils.arrayFilter(self.name, function (pin) {
return pin.toLowerCase().indexOf(search) >= 0;
});
});
change to
self.filterPins = ko.computed(function () {
var search = this.query().toLowerCase();
return ko.utils.arrayFilter(self.pins(), function (pin) {
return pin.name().toLowerCase().indexOf(search) >= 0;
});
});

Just want to update the code if using Knockout version newer than 3.2
Change from value and valueUpdate to textInput, as reccomended here
HTML:
<input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="textInput: query" autocomplete="off" />
JS:
this.query = ko.observable('');
this.filteredPins = ko.computed(function () {
if (this.query()) {
var search = this.query().toLowerCase();
return ko.utils.arrayFilter(this.pins(), function (pin) {
return pin.name().toLowerCase().indexOf(search) >= 0;
});
} else {
return pins
}}, this);

Knockout js add a new list

I am trying to create a form with a list which adds a list dynamically!
However I just can't get my add function working and it keep complains that my list is not defined.
Here is my viewmodel in jave script
function DeliveryCategoryViewModel() {
var self = this;
self.DeliveryCategory = ko.observable(new DeliveryCategory(1, "new Name", [new DeliveryOption("first"), new DeliveryOption("second")]));
self.addDeliveryOptions = function () {
self.DeliveryOptions.push(new DeliveryOption("new Option"));
}
self.removeDeliveryOptions = function (option) {
self.DeliveryCategory.remove(option);
}
}
and these are actual model which holds the data
function DeliveryCategory(id, name, option) {
this.Id = id;
this.Name = name;
this.DeliveryOptions = ko.observableArray(option);
}
function DeliveryOption(name) {
this.Id = "2";
this.Name = name;
}
$(document).ready(function () {
ko.applyBindings(new DeliveryCategoryViewModel());
});
This is my form
<div id="newDelCategory">
<input data-bind="value:DeliveryCategory().Id" type="hidden" />
<label class="newDelCategoryLabel">New delivery category name: </label>
<input type="text" data-bind="value:DeliveryCategory().Name" class="newDelCategoryText" id="newDelCategoryText" placeholder="Delivery category name" />
</div>
<div id="addOption">
<a id="addOptionLink" href="#" data-bind="click:addDeliveryOptions" class="link">+Add delivery option</a>
</div>
<div id="deliveryOptionContent" data-bind="foreach: DeliveryCategory().DeliveryOptions">
<div class="newDelOption">
<input data-bind="value:$data.Id" type="hidden" />
<div class="divider"></div>
<label class="newDelOptionLabel">New delivery option name: </label>
<input type="text" data-bind="value:$data.Name" class="categoryName" id="newDelOptionText" placeholder="Delivery option name" />
<a id="removeOptionLink" data-bind="click:$parent.removeDeliveryOptions" class="link removeOptionLink">Remove</a>
</div>
</div>
When I try to click click:addDeliveryOptions, it return on Firebug console.
TypeError: self.DeliveryCategory.DeliveryOptions is undefined
self.DeliveryCategory.DeliveryOptions.push(new DeliveryOption("new Option"));
I tried different things such as click:$root.addDeliveryOptions, and also tried to add addDeliveryOptions function as a prototype (e.g. DeliveryCategory.prototype.addDeliveryOptions(...)) and still getting Typeerror...
Is it because DeliveryOptions is not initialised? I expected that it would be when DeliveryCategory is initialised from the DeliveryCategoryViewModel() ...
Any idea? Thanks!

Small Oversight. Easy Fix.
You were calling push and remove off the observable array from the view model but it does not exists as a direct member of the view model.
This is because you never add the observable array directly to this view model. You use a constructor to create an object to observe with DeliveryCategory. One of the properties on that object is an observable array DeliveryOptions. To get access to the observable array from this scope, you have to evaluate DeliveryCategory to get access to it's property DeliveryOptions before you run any array methods. So, instead of this:
self.addDeliveryOptions = function () {
self.DeliveryOptions.push(new DeliveryOption("new Option"));
}
self.removeDeliveryOptions = function (option) {
self.DeliveryCategory.remove(option);
}
The Solution:
self.addDeliveryOptions = function() {
self.DeliveryCategory().DeliveryOptions.push(new DeliveryOption("new Option"));
}
self.removeDeliveryOptions = function(option) {
self.DeliveryCategory().DeliveryOptions.remove(option);
}
See the snippet below
function DeliveryCategoryViewModel() {
var self = this;
self.DeliveryCategory = ko.observable(new DeliveryCategory(1, "new Name", [new DeliveryOption("first"), new DeliveryOption("second")]));
self.addDeliveryOptions = function() {
self.DeliveryCategory().DeliveryOptions.push(new DeliveryOption("new Option"));
}
self.removeDeliveryOptions = function(option) {
self.DeliveryCategory().DeliveryOptions.remove(option);
}
}
function DeliveryCategory(id, name, option) {
this.Id = id;
this.Name = name;
this.DeliveryOptions = ko.observableArray(option);
}
function DeliveryOption(name) {
this.Id = "2";
this.Name = name;
}
$(document).ready(function() {
ko.applyBindings(new DeliveryCategoryViewModel());
});
<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>
<div id="newDelCategory">
<input data-bind="value:DeliveryCategory().Id" type="hidden" />
<label class="newDelCategoryLabel">New delivery category name:</label>
<input type="text" data-bind="value:DeliveryCategory().Name" class="newDelCategoryText" id="newDelCategoryText" placeholder="Delivery category name" />
</div>
<div id="addOption">
<a id="addOptionLink" href="#" data-bind="click:addDeliveryOptions" class="link">+Add delivery option</a>
</div>
<div id="deliveryOptionContent" data-bind="foreach: DeliveryCategory().DeliveryOptions">
<div class="newDelOption">
<input data-bind="value:$data.Id" type="hidden" />
<div class="divider"></div>
<label class="newDelOptionLabel">New delivery option name:</label>
<input type="text" data-bind="value:$data.Name" class="categoryName" id="newDelOptionText" placeholder="Delivery option name" />
Remove
</div>
</div>