Develop Reference

Knockout bindings from JSON file issues

I am using Typescript to define my Knockout ViewModel.
I have a JSON file, the structure of which can be seen here (Github gist as It's a bit large to paste here).
The structure is basically:
OrderLine (the root) -> milestones -> factory_date
Or orally: (many) order lines have (many) milestones, which each have (one) factory date.
I am trying to build a ViewMOdel with the following:
var FactoryAppViewModel = (function () {
function FactoryAppViewModel(seasonID) {
var self = this;
self.seasonID = seasonID;
self.orderlines = ko.observableArray([]);
this.buildViewModel();
}
FactoryAppViewModel.prototype.buildViewModel = function () {
var self = this;
var getOrderLines = HTTP.get("/season/" + self.seasonID + "/orderlines").done(function (data) {
self.orderlines(JSON.parse(data));
}).fail(function () {
error("Could not get orderlines");
});
};
As far as I know, the JSON.parse on the data here will apply the values to the orderlines ko.observableArray([]), However I need to apply a ko.observable to the order lines children (milestones), and to a milestones child (factory_date) as well. And I don't know how to do this. Least of all from JSON.
I have read this but it didn't seem to help me.
I know that the observable isn't applied, because when i change a factory_date in the view, it doesn't update the viewmodel.
Any help would be appreciated. The javascript above is the compiled TypeScript.
EDIT:
Here is an example of the way I'm accessing the code in the view:
<tbody data-bind="foreach: orderlines">
<tr>
<td data-bind="text: factory.name"></td>
<!-- ko foreach: milestones -->
<!-- ko if: factory_date == null -->
<td>
<span>TBA</span>
</td>
<!-- /ko -->
<!-- ko if: factory_date !== null -->
<td>
<div class="wrapper-wrapper">
<div class="btn btn-primary dateChanger">
<span data-bind="text: moment(factory_date.milestone_date).format('DD-MM-YYYY')"></span>
</div>
<div class="date-update-wrapper text-center">
<input type="text" data-bind="attr: {value: moment(factory_date.milestone_date).format('DD-MM-YYYY')}" class="form-control datetimepicker">
<a class="save-date btn btn-success" data-bind="click: function(){$root.saveDate(factory_date, $parent)}"><i class="fa fa-check"></i></a>
<a class="cancel-date btn btn-danger"><i class="fa fa-times"></i></a>
</div>
</div>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
</tbody>
The part that made me aware I had an issue was this part:
data-bind="click: function(){$root.saveDate(factory_date, $parent)}"
I made a simple saveDate method, which was console.log(factory_date.milestone_date), and it returned the default JSON data, despite me editing it in the view (using the datepicker).

Knockout does not map children in lists to observables by default. There is a plugin called ko.mapping that can help you achieve what you are looking for.
You can set up a "children" mapping, or loop through your children, manually making them observable (In this case from JavaScript):
var mappedChildren = [];
var children = someObj.children();
for (var i = 0; i < children.length; i++) {
var mappedChild = ko.mapping.fromJS(children[i], mappingFunction);
mappedChildren.push(mappedChild);
}
someObj.children(mappedChildren);

Knockout observable used in text binding not updating ui

This has been driving me nuts for hours now. I think I have tried everything on the javascript side. In the javascript side I have this value: resultItem.standingNo which is a knockout observable. This one works fine, it updates like it should. I've used subscribers and everything I can think of to see that the value is updated and also tried the same to update other observables to use instead of this one.
What happens. The initial value is rendered in the html when I create the observable. But the html bit never receives the updates. I have tried with and without .extend({ notify: 'always' }), I have tried observable, computed and pureComputed, none updates the ui. But all gets the new value. I have other observables in the same class which update fine. But they are not located in the same place in the html.
resultItem.shortName just below is not an observable and doesn't need to be updated.
So my question is, is there some limitation with the html that prevents some observables from updating? Because I can't see any problem with my code between the two "...". Where those are there is code that get observable updates with no problems. Any ideas?
<!-- ko foreach: { data: resultLists, as: 'resultList' } -->
<!-- ko if: resultList.visible -->
...
<!-- ko foreach: { data: resultList.resultItems, as: 'resultItem', afterRender: $parent.renderedHandler } -->
<!-- Competitor Info Row Start-->
<tr class="rowDetail" data-bind="toggleCompetitorDetails: resultItem.competitorSelected">
<td class="selected-competitor-content" colspan="100%">
<div class="selected-competitor-container" >
<div class="selected-competitor-image">
<div class="img" data-bind="attr: { style: 'background-image: url(' + resultList.getRandomImage() + ');' }"></div>
<div class="competitor-dot competitor-star" data-bind="attr: {class: resultItem.isTopCompetitor()}, style: { backgroundColor: resultItem.color.toString(), color: resultItem.color.toString() }"></div>
</div>
DOES NOTE UPDATE --> <div class="selected-competitor-position" data-bind="text: resultItem.standingNo"></div> <-- DOES NOTE UPDATE
<div class="selected-competitor-info">
<p class="selected-competitor-name" data-bind="text: resultItem.shortName"></p>
<p class="selected-competitor-captain" data-bind="text: resultItem.name"></p>
</div>
</div>
</td>
</tr>
<!-- Competitor Info Row End -->
...
<!-- /ko -->
<!-- /ko --><!-- ResultList visible end -->
<!-- /ko --><!-- ResultLists foreach End -->

Knockout view not removing item from view after delete

I have this code that successfully deletes an exam from a list of exams displayed on a page, but the page still shows the deleted exam. You have to manually refresh the page for the view to update. We are using a simlar pattern on other pages and it's working correctly. I don't understand why it doesn't work on this page.
// Used to handle the click event for Delete
remove = (exam: Models.Exam) => {
$("#loadingScreen").css("display", "block");
var examService = new Services.ExamService();
examService.remove(exam.examId()).then(() => {
examService.getByFid().then((examinations: Array<Models.Exam>) => {
this.exams(examinations);
this.template("mainTemplate");
});
}).fail((error: any) => {
// Add this error to errors
this.errors([error]);
window.scrollTo(0, 0);
}).fin(() => {
$("#loadingScreen").css("display", "none");
});
}
Here's the UI code that displays the list of exams
<div class="section module">
<!-- ko if: exams().length > 0 -->
<!-- ko foreach: exams.sort(function(a,b){return a.mostRecentDateTaken() > b.mostRecentDateTaken() ? 1:-1}) -->
<div class="addremove_section bubbled">
<a class="button open_review" data-bind="click: $root.edit">Edit</a>
<a class="button open_review" data-bind="click: $root.remove">Delete</a>
<div class="titleblock">
<h4 data-bind="text: 'Exam Name: ' + examTypeLookup().examTypeName()"></h4>
<div data-bind="if:examEntityLookup()!=null">
<div data-bind=" text: 'Reporting Entity: ' + examEntityLookup().description()"></div>
</div>
<div data-bind="text: 'Most recent date taken: ' + $root.formatDate(mostRecentDateTaken())"></div>
<div data-bind="text: 'Number of attempts: ' + numberOfAttempts()"></div>
<div data-bind="text: 'Pass/Fail Status: ' + $root.PassFailEnum(passFailId())"></div>
</div>
<div class="clearfix"></div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: exams().length == 0 -->
<div class="addremove_section bubbled">
<div class="titleblock">
<div>No Exams Have Been Entered.</div>
</div>
</div>
<!-- /ko -->
</div>
EDIT: I discovered that if I remove the sort from this line in the view
<!-- ko foreach: exams.sort(function(a,b){return a.mostRecentDateTaken() > b.mostRecentDateTaken() ? 1:-1}) -->
to
<!-- ko foreach: exams -->
it works! The only problem is that I need the data sorted.

I removed the sorting from the view and did the sorting in the service. Not really sure why I can't sort in the view. I assume it's a knockout.js bug.
<!-- ko foreach: exams -->
[HttpGet]
[Route("api/exam")]
public IEnumerable<TDto> GetApplicantExams()
{
var dtos = GetCollection(() => _examService.GetApplicantExams(UserContext.Fid).OrderBy(e => e.DateTaken));
return dtos.ForEach(t => AddItems(t));
}

It's not a bug in Knockout. Since the sort invocation (as you're doing it) is not under the control of a computed/dependent observable, there's nothing to trigger it to resort. You've basically broken the connection between the UI (or more technically, the bindingHandler) and the ko.observable which KO uses for tracking changes.
I've run into this many times where I work, and the general pattern I use is something like this:
var viewmodel = {
listOfObjects:ko.observableArray(),
deleteFromList:deleteFromList,
addToList:addToList,
}
//in your HTML, you'll do a foreach: listOfSortedObjects (instead of listOfObjects)
viewmodel.listOfSortedObjects = ko.computed(function(){
//Since this is *inside* the change tracking ecosystem, this sort will be called as you would expect
return viewmodel.listOfObjects().sort(yourSortingFunction);
});
//Since you cannot edit a (normal) computed, you need to do your work on the original array as below.
function deleteFromList(item){
viewmodel.listOfObjects.remove(item);//Changing this array will trigger the sorted computed to update, which will update your UI
}
function addToList(item){
viewmodel.listOfObjects.push(item);
}

Stringing KnockOut conditionals together

In the aspx of my page I have the following Knockout conditional:
<tbody id="resultsTable" data-bind="foreach: get_contacts()">
<!-- ko if: get_xPos() == 0 -->
<tr>
<td>
<span data-bind="text: get_lname()">
</span>
,
<span data-bind="text:get_fname()">
</span>
<br />
<span data-bind="text: get_email()">
</span>
<br />
<span data-bind="text: get_phone()">
</span>
<br />
<span data-bind="text: get_office()">
</span>
</td>
</tr>
<!-- /ko -->
</tbody>
This works by itself. If I add another Knockout conditional immediately after the first (directly before the </tbody>), Knockout throws an error Cannot find closing comment tag to match: ko ifnot: get_xPos() == 0:
<!-- ko ifnot: get_xPos() == 0 -->
<td>
<span data-bind="text: get_lname()">
</span>
,
<span data-bind="text:get_fname()">
</span>
<br />
<span data-bind="text: get_email()">
</span>
<br />
<span data-bind="text: get_phone()">
</span>
<br />
<span data-bind="text: get_office()">
</span>
</td>
<!-- /ko -->
The intention here is to conditionally create a new row. If my element has an xPosition of 0, then I make a new row and cell. Otherwise I just create a new cell in my table.
Can anyone point out what's wrong with my code?

From the comments:
So you want to create table with 5 cells in each row?
Right.
Reflect that circumstance in your view model. That's what it's for. The view should not do this.
Computed observables are the way to solve this. In your view model add:
self.contactRows = ko.computed(function () {
var rows = [],
i,
contacts = self.get_contacts();
for (i = 0; i < contacts.length; i += 5) {
rows.push( contacts.slice(i, i + 5) );
}
return rows;
});
and in your view use it:
<tbody id="resultsTable" data-bind="foreach: contactRows">
<tr data-bind="foreach: $data">
<td>
<span data-bind="text: get_lname()"></span>,
<span data-bind="text: get_fname()"></span><br />
<span data-bind="text: get_email()"></span><br />
<span data-bind="text: get_phone()"></span><br />
<span data-bind="text: get_office()"></span>
</td>
</tr>
</tbody>
Think if you can find a nicer markup for what you are trying to to.
Maybe that's a better approach:
Semantically you are trying to display a (nested) list. Using ul / li with appropriate CSS would result in more meaningful markup than using a table. And you wouldn't have to fill in meaningless empty cells just to make the table look right.
You could even drop the idea of nesting altogether and make a single list that you style to allow a maximum of 5 "contact" list items per row (fixed dimension items floated left in a container that's 5 times wider than a single item).
That way you could use one simple foreach binding in your view and you'd not need a computed observable at all. Displaying 6 or 4 items per row would amount to one trivial CSS change.

Containerless control flow syntax - the templates don't render properly with IE8

When using containerless syntax and calling a Knockoutjs template, the IE8 doesn't render properly a template inside a foreach control flow. The initialization works ok, but if the items are changed, then the rendering is wrong. This happens only on IE8, 9 is ok, even 7 works.
Model
function BrowseModel() {
var self = this;
self.items = ko.observableArray();
self.itemsStep = ko.observable(1);
self.repopulate = function() {
self.itemsStep(self.itemsStep() + 3);
return false;
};
ko.computed(function() {
var arr = [];
for (var i = self.itemsStep(); i <= self.itemsStep() + 5; i++) {
arr.push(i);
}
self.items(arr);
}, self);
}
ko.applyBindings(new BrowseModel());
View
Change items
<ul>
<!-- ko foreach: items -->
<!-- ko template: { name: 'product_template'} -->
<!-- /ko -->
<!-- /ko -->
</ul>
<ul>
<li data-bind="template: { foreach: items, name: 'product_template' }"></li>
</ul>
<br />
<div data-bind="text: ko.toJSON($data)"></div>
<script type="text/html" id="product_template">
<li data-bind="text: $data"></li>
</script>
I didn't find some pattern how IE 8 behaves. The rendering is kind random.
Beside not using the containerless control flow syntax, how can I fix this?
Fiddle
LE: I'm using F12 Developer Tools if this does matter

Fixed jsFiddle
I've added a to the inner binding and it seems to have fixed the problem. It seems like knockout in IE8 does not like nested containerless control bindings that have no content.
Note, in my experience, containerless control bindings tend to show erratic behavior in IE6-IE8. If you intend to support these browsers, I suggest you avoid containerless control bindings. Nearly all scenario's that involve containerless control bindings can be rewritten to an alternative with a HTML element with a data-bind expression.

I've had luck with this structure in IE8. When I tried to keep the containerless stuff separate as you show in the original post, IE8 complained. By using the syntax shown below, it works fine.
<table id="mam-listing-table" border="0" width="100%" cellpadding="2" cellspacing="0">
<thead>
<tr valign="top">
<th class="ms-vh" nowrap="">Team</th>
<th class="ms-vh" nowrap="" colspan="99">Note Count</th>
</tr>
<tr valign="top">
<th class="ms-vh" nowrap=""></th>
<!-- ko foreach: Months -->
<th class="ms-vh" nowrap="" data-bind="text: $data "></th>
<!-- /ko -->
<th class="ms-vh" nowrap="" data-bind="text: 'TOTAL as of ' + moment().format('MM/DD/YY')"></th>
</tr>
</thead>
<tbody>
<!-- ko template: { name: 'Site', foreach: Sites} -->
<!-- /ko -->
<!-- ko template: { name: 'Total'} -->
<!-- /ko -->
</tbody>
</table>