Develop Reference

Use 'this' inside function to get viewmodel property from list of viewmodels

The following establishes the controller.model as a list of viewmodels:
var controller = {
loadData: function loadData() {
controller.model = new myProj.mvc.queueStatusListViewModel();
controller.model.isLoaded = myProj.mvc.getInitializationEvent();
return controller.model.get().done(function () {
controller.model.isLoaded(true);
});
},
and inside of the var conroller = { } block I have several functions that are evaluated on page load, such as:
getIconForBool: function (badStatus) {
return (badStatus ? "icon failure" : "icon checked");
},
What I'd like to do is have things computed without having to pass in the variable. Such as
getIconForBool: function() {
return (this.model.property ? "icon failure" : "icon checked");
},
but I am unable to get any successful results. I know my model works fine- I have a table with rows properly iterating, such as:
<tbody data-bind="foreach: queueStatuses">
<tr>
<td data-bind="text: name"></td>
<td><span data-bind="css: controller.getIconForBool(misconfigured._latestValue)"></span></td>
<td><span data-bind="css: controller.getIconForBool(notMonitored._latestValue)"></span></td>
and when I log to the console, I get all n viewmodels that I'd expect, but I can't seem to unwrap them in any helpful way.

Decrement a value after clicking a button in the same row - knockout

I have a table which I fill with some numbers. There is a button in each row. After clicking this button I would like to decrement a counter in this row. How to to this with knockout?
<div class="panel panel-default">
<div class=panel-heading>Title</div>
<table class=table>
<thead>
<tr>
<th>Counter</th>
<th>Increment</th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td data-bind="text: counter"></td>
<td> <input type="button" value="increment" data-bind=??? ></td>
</tr>
</tbody>
</table>
</div>
<script>
function AppViewModel() {
var self = this;
self.records = ko.observableArray([]);
$.getJSON("/data", function(data) {
self.records(data);
})
//function to decrement
}
ko.applyBindings(new AppViewModel());
</script>

I would do it this way:
Process data you get from server, turn counter property into observable and add function to decrement counter property
Restructure you code a little so viewmodel will be created by the time of ajax request
Move applyBindings call to ajax callback so it would fire when everything has been loaded
So the code would look like:
<tr>
<td data-bind="text: counter"></td>
<td> <input type="button" value="decrement" data-bind="click: decrement"></td>
</tr>
function AppViewModel() {
var self = this;
self.records = ko.observableArray([]);
}
var vm = new AppViewModel();
// load data from server
$.getJSON("/data", function(data) {
data.forEach( function(item) {
// make counter observable
item.counter = ko.observable(item.counter);
// add function to decrement
item.decrement = function() {
this.counter( this.counter()-1 );
}
})
// load array into viewmodel
vm.records(data);
// apply bindings when all obervables have been declared
ko.applyBindings(vm);
})
Check demo: Fiddle

I prefer to initialize and bind my viewmodel right away, but agree with the other poster that you need an observable.
Here is a solution that continues to create and bind your viewmodel right away, as in your original example, but instead of an array of the raw records you receive back it converts them into their own little model objects that have an observable for the counter and an increment function that can be data bound too. This decouples your data load from the life of the viewmodel, so if you wanted to add a button to load fresh data to overwrite it or anything like that, it's just another call to getData().
<!-- ... -->
<tbody data-bind="foreach: records">
<tr>
<td data-bind="text: counter"></td>
<td> <input type="button" value="increment" data-bind="click: increment" ></td>
</tr>
</tbody>
<!-- ... -->
<script>
function AppViewModel() {
var self = this;
self.records = ko.observableArray([]);
self.getData = function(){ /* ... */ };
self.getFakeData = function(){
var data = [{ counter: 1 }, { counter: 2}, { counter: 3 }];
var freshData = data.map(function(record){
return new AppRecord(record);
});
self.records(freshData);
};
}
function AppRecord(rawRecord) {
var self = this;
self.counter = ko.observable(rawRecord.counter);
self.increment = function(){
self.counter(self.counter() + 1);
};
}
var vm = new AppViewModel();
vm.getFakeData(); // replace with getData()
ko.applyBindings(vm);
</script>
Fiddle, with a getFakeData with sample data: https://jsfiddle.net/4hxyarLa/1/
If you are going to have a lot of rows and are concerned abut memory, you could put the increment function in a prototype method for the AppRecord and access the record via a parameter on the function, or you could add the function to the AppViewModel and bind to $parent.increment to call it and access the record via parameter passed to that function to increment it's counter property.

How to update a knockout view model based on a separate callback, rather than user input

I have built a view model representing time slices with the following structure:
function TimeslotViewModel() {
this.timeslots = ko.observableArray();
this.updateTimeslots = function(timeslots) {
this.timeslots.destroyAll();
}
this.clearTimeslots = function() {
this.timeslots.destroyAll();
}
this.addTimeslot = function(timeslot) {
this.timeslots.push(timeslot);
}
}
function Timeslot(time, available) {
this.time = time;
this.available = available;
}
I'm trying to render this in a tabular format like so:
<div class="container">
<table class="table">
<thead>
<tr><th>Time</th><th>Status</th>
</thead>
<tbody data-bind="foreach: timeslots">
<td data-bind="text: time"></td>
<td data-bind="text: available"</td>
</tbody>
</table>
</div>
I've bound on page load:
$(function() {
ko.applyBindings(new TimeslotViewModel());
});
I'm trying to populate this table based on the callback result from an ajax call, but it doesn't seem to be working as expected. Here is what I tried:
$.getJSON(
"/myAjaxCall",
function (jsonData) {
var timeslotViewModel = new TimeslotViewModel();
timeslotViewModel.clearTimeslots();
$.each(jsonData, function (i, ts) {
var tsData = JSON.parse(ts);
var timeslot = new Timeslot(tsData.time, tsData.booked);
timeslotViewModel.addTimeslot(timeslot);
});
});
Unfortunately, I'm not seeing my view model's array get populated at all from this code. What is the right way to populate a view model based on a callback function's response?

You are creating a new viewmodel instead of updating the current one.
Replace this line
var timeslotViewModel = new TimeslotViewModel();
Either create a global viewmodel:
var myVm = new TimeslotViewModel();
ko.applyBindings(myVm);
//...
var timeslotViewModel = myVm;
Or get the current one from a node:
var timeslotViewModel = ko.contextFor($('.container').get(0)).$root

KnockoutJS Bindings With Nested Templates

I'm having a problem with nested bindings with Knockout.JS
For example if I have the following in say an app.js file:
var UserModel = function() {
this.writeups = ko.observableArray([]);
}
var WriteupModel = function() {
this.type = 'some type';
}
var MyViewModel = function() {
this.newUser = new UserModel();
this.selectedUser = ko.observable(this.newUser);
this.selectedUser().writeups().push(new WriteupModel());
}
ko.applyBindings(new MyViewModel());
and the following for a view:
<div id="empReportView" data-bind="template: { name: 'empTmpl', data: selectedUser }"></div>
<script type="text/html" id="empTmpl">
<table>
<tbody data-bind="template: { name: 'empWuItem', foreach: $data.writeups } ">
</tbody>
</table>
</script>
<script type="text/html" id="empWuItem">
<tr>
<td data-bind="text: type"></td>
</tr>
</script>
Whenever another WriteupModel is pushed onto the writeups array belonging to the selectedUser the table doesn't update. This is a simplified version of what I'm trying to accomplish but it's to be assumed that when they create a writeup it should update the write-ups table based on the new information.
I'm new to Knockout so any help would be appreciated!
Thanks.
-=-= Edit 1 =-=-
One thing to note, if you reload the binding for the selectedUser it will spit out the empWuItem template for the added writeup. This just seems inefficient as the bindings should trigger when the WriteUp is added to the writeups observable array in the UserModel without have to "re-assign" the selectedUser property in the view model.

Push is a property of observable array:
this.selectedUser().writeups().push(new WriteupModel())
should be
this.selectedUser().writeups.push(new WriteupModel());

Refreshing list after ajax call with Knockout JS

I have a list of attachments on a page which is generated using a jQuery $.ajax call and Knockout JS.
My HTML looks like (this is stripped back):
<tbody data-bind="foreach: attachments">
<tr>
<td data-bind="text: Filename" />
</tr>
</tbody>
I have a function that gets the list of attachments which is returned as a JSON response:
$(function () {
getFormAttachments();
});
function getAttachments() {
var request = $.ajax({
type: "GET",
datatype: "json",
url: "/Attachment/GetAttachments"
});
request.done(function (response) {
ko.applyBindings(new vm(response));
});
}
My view model looks like:
function vm(response) {
this.attachments = ko.observableArray(response);
};
There is a refresh button that the use can click to refresh this list because over time attachments may have been added/removed:
$(function () {
$("#refresh").on("click", getAttachments);
});
The initial rendering of the list of attachments is fine, however when I call getAttachments again via the refresh button click the list is added to (in fact each item is duplicated several times).
I've created a jsFiddle to demonstrate this problem here:
http://jsfiddle.net/CpdbJ/137
What am I doing wrong?

Here is a fiddle that fixes your sample. Your biggest issue was that you were calling 'applyBindings' multiple times. In general you will call applyBindings on page load and then the page will interact with the View Model to cause Knockout to refresh portions of your page.
http://jsfiddle.net/CpdbJ/136
html
<table>
<thead>
<tr><th>File Name</th></tr>
</thead>
<tbody data-bind="foreach: attachments">
<tr><td data-bind="text: Filename" /></tr>
</tbody>
</table>
<button data-bind="click: refresh">Refresh</button>
javascript
$(function () {
var ViewModel = function() {
var self = this;
self.count = 0;
self.getAttachments = function() {
var data = [{ Filename: "f"+(self.count*2+1)+".doc" },
{ Filename: "f"+(self.count*2+2)+".doc"}];
self.count = self.count + 1;
return data;
}
self.attachments = ko.observableArray(self.getAttachments());
self.refresh = function() {
self.attachments(self.getAttachments());
}
};
ko.applyBindings(new ViewModel());
});
--
You may also want to look at the mapping plugin - http://knockoutjs.com/documentation/plugins-mapping.html. It can help you transform JSON into View Models. Additionally it is able to assign a property to be the "key" for an object... this will be used to determine old vs new objects on subsequent mappings.
Here is a fiddle I wrote a while back to demonstrate a similar idea:
http://jsfiddle.net/wgZ59/276
NOTE: I use 'update' as part of my mapping rules, but ONLY so I can log to the console. You would only need to add this if you wanted to customize how the mapping plugin updated objects.