Develop Reference

Is it possible to have knockout call a function when a view is rendered?

I have this relatively simple .cshtml view with knockout:
<div class="selected-cluster" data-bind="visible: Selected()">
<div data-bind="foreach: {data: Topics(), as: 'topic'}" class="row">
<!-- ko if: topic.Grid && topic.FirstIterative -->
#Html.Partial("Partial/_TopicGrid")
<!-- /ko --><!--END if: topic.Grid && topic.FirstIterative -->
<!-- ko ifnot: topic.Grid -->
#Html.Partial("Partial/_Topic")
<!-- /ko --><!--END ifnot: topic.Grid -->
</div>
The viewmodel of course contains Topics(), and it contains a function that I want to have executed after the last element of Topics has been processed. How can I achieve this?

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 -->

How do I dynamically show more bootstrap tabs in a _Layout template?

I have an existing site using MVC and a _Layout page using a sectional control for the render. We are using bootstrap tabs throughout for data displays.
I have simplified this setup, but there are other VMs binding to this page, so I can't bind to the whole page, which would be the easy route for what I need.
I want to have a dynamic amount of tabs being rendered like:
<div class="panel panel-default">
<div id="tabContentParent" class="tab-content">
<div class="tab-pane active" id="result">
<!-- various details of a report -->
</div>
<!-- ko foreach: myVM -->
<div class="tab-pane" data-bind="attr: {'id': reportId}">
<!-- various bindings for reports -->
</div>
<!-- /ko -->
</div>
</div>
#section scripts
{
#Scripts.Render("~/Areas/Results/VMs/myVM.js")
<script type="text/javascript">
app.myVM.load();
ko.applyBindings(app.myVM, document.getElementById('tabContentParent'));
</script>
}
How can I get the tabs to also reproduce like this when they are in a separate sectional control and not within the same data-binding area?
#section controls
{
<ul class="nav nav-tabs section-controls">
<li class="active">Details</li>
<li class="hidden" id="tab1">Report 1</li>
<li class="hidden" id="tab2">Report 1</li>
<!-- etc., etc. -->
</ul>
}

I am not sure if this is the best way to do it, or if this is the best way to use knockout... but I think I have figured out how to do this. I have bound the ViewModel to multiple sections in separate applyBindings calls. I haven't seen this as a solution or suggestion before so I am not sure if there are side-effects.
A fiddle: Knockout multi-binding showing the functioning solution I propose. I defined the nav tabs like so:
<div>
<ul class="nav nav-tabs section-controls" id="vm1Id2">
<li class="active">Details</li>
<!-- ko foreach: tabInfos -->
<li>
<a data-bind="text: text, attr:{ href: '#' + url }" data-toggle="tab"></a>
</li>
<!-- /ko -->
</ul>
</div>
I defined the tab context like so (and a vm/div as a separator):
<div id="vm2Id">
<p>
<label data-bind="text: message"></label>
</p>
</div>
<div class="panel panel-default">
<div id="vm1Id1" class="tab-content">
<div class="tab-pane active" id="result">
<label>Some data displayed here</label>
</div>
<!-- ko foreach: newTabs -->
<div class="tab-pane" data-bind="attr: {'id': $data}">
<label data-bind="text: $data"></label>
</div>
<!-- /ko -->
</div>
</div>
And finally, I bound everything a little double time.
var ViewModel1 = function() {
var newTabs = ko.observableArray(["report1", "report2"]);
var tabInfos = ko.observableArray([{text: "Report 1", url: "report1"}, {text: "Report 2", url: "report2"}]);
return {
newTabs: newTabs,
tabInfos: tabInfos
};
};
var ViewModel2 = function() {
var message = ko.observable("This is a message as a space holder");
return {
message: message
};
};
var vm1 = new ViewModel1();
var vm2 = new ViewModel2();
ko.applyBindings(vm1, document.getElementById('vm1Id1'));
ko.applyBindings(vm1, document.getElementById('vm1Id2'));
ko.applyBindings(vm2, document.getElementById('vm2Id'));
I think this is the correct way to approach this. It works well enough when the page renders.

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);
}

Knockout.js: make id based on text binding

I want to have something like following code:
<!-- ko foreach: subTopics -->
<div id='subtopic-name-here'>
<!-- /ko -->
That is I want to have id of my div as the name of subtopic(data-bind="text:name").How can I do that ?

You should be able to use the attr binding for this:
<!-- ko foreach: subTopics -->
<div data-bind="attr: {'id': name}"></div>
<!-- /ko -->
http://knockoutjs.com/documentation/attr-binding.html