Develop Reference

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 dynamically selecting template error: "Cannot find template with ID''"

My target is to show "noSets" template if observableArray length less 0 and render template with item details - "showSets", if observableArray length greater 0. I'd like to use templates for this purpose, but FireBug show error: Cannot find template with ID "templatename".
Here is ViewModel:
function SetsViewModel() {
var self = this;
self.usersets = ko.observableArray();
self.getTemplate = function () {
return self.usersets().length > 0 ? "showSets" : "noSets";
}
}
$(document).ready(function () {
ko.applyBindings(new SetsViewModel(), document.getElementById('user_sets'));
});
And here is HTML markup:
<div data-bind="template: { name: $root.getTemplate, foreach: usersets }" id="user_sets">
<script type="text/html" id="noSets">
<p>You do not have items yet.</p>
</script>
<script type="text/html" id="showSets">
<div class="block">
<input type="hidden" data-bind="value: $data.SetId" />
<div class="fav" data-bind="css: { fullop: $data.IsFavorite == true }">
<img alt="" src="img/fav.png" data-bind="click: $root.setFavorite">
</div>
<div>
<img alt="" data-bind="attr: { src: $data.SetImg }">
</div>
<div class="txt">
<h3 data-bind="text: $data.SetName, click: $root.go"></h3>
<p><span data-bind="text: $data.ItemsNumber + ' вещей,'"></span><span data-bind=" text: ' общая цена ' + $data.SetPrice + ' руб'"></span></p>
</div>
</div>
</script>
</div>
How can I fix it?

You can declare the templates outside the div that you're binding to as a work around. As #JeffMercado states:
The actual problem was that since the user_sets uses a template binding, the body is discarded (and the templates along with it)
function SetsViewModel() {
var self = this;
self.usersets = ko.observableArray([{SetId: 1, SetName: 'Name 1'}]);
self.getTemplate = function () {
return self.usersets().length > 0 ? "showSets" : "noSets";
}
}
$(document).ready(function () {
ko.applyBindings(new SetsViewModel(), document.getElementById('user_sets'));
});
<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>
<script type="text/html" id="noSets">
<p>You do not have items yet.</p>
</script>
<script type="text/html" id="showSets">
<div class="block">
<input data-bind="value: $data.SetId" />
<div class="txt">
<h3 data-bind="text: 'Set name:' + $data.SetName"></h3>
</div>
</div>
</script>
<div data-bind="template: { name: getTemplate, foreach: usersets }" id="user_sets">
</div>

I think named templates are potentially the wrong approach to this specific issue - they're more designed for when you want a different template for each item, which isn't the case here. Instead, it would be more appropriate to show an entirely different div when there are 0 items:
<div data-bind="visible: usersets().length == 0">
You have no sets
</div>
<div data-bind="visible: usersets().length > 0, foreach: usersets" id="user_sets">
<div class="block">
<input type="hidden" data-bind="value: $data.SetId" />
<div class="fav" data-bind="css: { fullop: $data.IsFavorite == true }">
<img alt="" src="img/fav.png" data-bind="click: $root.setFavorite">
</div>
<div>
<img alt="" data-bind="attr: { src: $data.SetImg }">
</div>
<div class="txt">
<h3 data-bind="text: $data.SetName, click: $root.go"></h3>
<p><span data-bind="text: $data.ItemsNumber + ' вещей,'"></span><span data-bind=" text: ' общая цена ' + $data.SetPrice + ' руб'"></span></p>
</div>
</div>
</div>

Knockout conditional binding (but not the native "if" way)

I have a case that look like this (excessively simplified):
<!-- ko if: readOnly() -->
<a href="url" data-bind="click: ToggleReadOnly()" />
<!-- /ko -->
<!-- ko ifnot: readOnly() -->
<a href="url" data-bind="visible: someObservable" />
<!-- /ko -->
Because of multiple other things around that would multiply the tests and duplicate a lot of code, I'd need to be able to do this in one line, something like:
<a href="url" data-bind="if: readOnly() { click: ToggleReadOnly() } else: { visible: someObservable }" />
Is there a way to do that ?

There are a couple of approaches you could take to this. Each with it's own strengths and weaknesses. but I will focus on using templates.
Create a template for each state where it is rendered in readonly mode or not. You'll only need to add to your model a function that decides which template to use.
<script type="text/html" id="template-readonly-link">
ReadOnly
</script>
<script type="text/html" id="template-readwrite-link">
ReadWrite
</script>
<!-- ko template: { name: selectTemplate } --><!-- /ko -->
function ViewModel() {
this.readOnly = ko.observable(true);
this.someObservable = ko.observable(true);
this.ToggleReadOnly = function (data, event) {
this.readOnly(!this.readOnly());
return false;
}.bind(this);
this.selectTemplate = function (data) {
return this.readOnly()
? 'template-readonly-link'
: 'template-readwrite-link';
}.bind(this);
}
fiddle
You can explore other approaches such as custom components, custom bindings, etc. But this may be the easiest to implement.

KnockoutJS Not Populating $root observable inside the "With" Binding Context

I've searched and searched for an answer, so hope I haven't duplicated this anywhere.
I am using ASP .NET MVC5, with KnockoutJS as my ORM.
For some reason, data isn't being populated in the DOM when I try to reference back to the ViewModel using the $root binding context (Once inside the "with" binding context)
The with binding context is declared in a normal mvc view razor page, however I am using the $root binding context inside a partial view which is loaded into the main view.
Has anyone had any problems like this or can spot my error? I will paste my viewmodel and html code below.
ViewModel
var ProfileViewModel = function () {
var self = this;
this.Member = ko.observable(); - With Binding to this
this.SocialNetworks = ko.observableArray();
this.Skills = ko.observableArray();
this.SkillsFilter = ko.observable(""); - Trying to access these from root
this.FilteredSkills = ko.observableArray();
this.References = ko.observableArray();
this.Has = function (has_what) {
if (has_what) {
if (has_what.length > 0) {
return true;
} else {
return false;
}
}
return false;
};
$.getJSON("/doitgrad/api/member/CameronPearce91", function (allData) {
self.Member(new DoItGrad.Objects.Member(allData, true));
self.FilteredSkills = ko.computed(function () {
return ko.utils.arrayFilter(self.Skills(), function (item) {
var filter = self.SkillsFilter(),
doesnthaveskill = (jQuery.inArray(item, self.Member().details.skills()) == -1),
containsfiltertext = (item.title().indexOf(filter) > -1);
if (filter != "") {
return (doesnthaveskill && containsfiltertext);
} else {
return doesnthaveskill;
}
});
});
})
$.getJSON("/doitgrad/api/skill/", function (allData) {
var mappedSkills = $.map(allData, function (item) { return new DoItGrad.Objects.Skill(item); });
self.Skills(mappedSkills);
});
}
var model = new ProfileViewModel();
ko.applyBindings(model);
MVC View
<section id="profile-details" data-bind="with: Member">
<section id="profile-cover">
<!-- ko if: details.images.cover() == null -->
<img src="/DoitGrad/Content/images/Profile/default_cover.jpg">
<!-- /ko -->
<!-- ko ifnot: details.images.cover() == null --><!-- /ko -->
<section class="change-cover">Change cover photo</section>
<section id="profile-picture">
<!-- ko if: details.images.profile() == null -->
<img src="/DoitGrad/Content/images/Profile/default_avatar.png">
<!-- /ko -->
<!-- ko ifnot: details.images.profile() == null --><!-- /ko -->
<h2 id="profile-name" data-bind="text: title">Cameron Pearce</h2>
<section id="profile-username" data-bind="text: details.username">CameronPearce91</section>
</section>
</section>
<section id="profile-wrapper">
<section id="profile-about" data-bind="text: description">Since I have been at uni, I believe I have achieved a lot. I took a year out of my studies to do a work placement year with Xerox based in Welwyn Garden City, primarily focusing on developing C# Web Applications on the MVC framework. It was the best thing I could have done for my career I believe, I have certainly learnt a lot.</section>
#Html.Partial("partialname")
Partial View
<section class="profile-detail-holder">
<section class="add" data-form="addSkill">+</section>
<h2 class="profile-detail-header">Skill Wall</h2>
<ul id="profile-skillwall" data-bind="foreach: details.skills()"></ul>
</section>
<section class="dialog-form" data-form="addSkill">
<section class="form-cover grey"></section>
<section class="form-content">
<section class="form-wrap">
<section class="form-close">x</section>
<header class="form-header">Add Skill</header>
<section class="form-body">
<form id="dig-member-addskill" class="area" method="post" action="#">
<input type="text" data-bind="text: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>
<ul data-bind="foreach: $root.FilteredSkills"></ul>
<section class="ui-button submit">
<input type="submit" value="Add">
</section>
</form>
</section>
</section>
</section>
</section>
If anyone needs anymore information, feel free to ask.

I think I've spotted it, and it's fairly simple:
<input type="text" data-bind="text: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>
you are using a text-binding on the input field, so updating the input won't change the observable. Use a value-binding instead:
<input type="text" data-bind="value: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>

Knockoutjs: dynamic content and applyBindings

I am "dynamically" populating my page like this:
<script type="text/html" id="ContainerTemplate">
<span data-bind="template: {
name: contentTemplate,
data: contentData }"></span>
</script>
<script type="text/html" id="fooTemplate">
<span data-bind="text: barAttribute"></span>
</script>
<button data-bind="click: complete">complete</button>
Hello
<span data-bind="template: { name: 'ContainerTemplate', foreach: myContents }"></span>
!
ViewModel:
var viewModel = {
myContents: ko.observableArray([]),
complete: function() {
viewModel.myContents.push({
contentTemplate:'fooTemplate',
contentData:{barAttribute:'world'}});
}
};
ko.applyBindings(viewModel);
A particularity is that template names are dynamic. It seems to work like this (you can try it on http://jsfiddle.net/hPQNx/ ), but I wonder if I'm doing things correctly. Some template features like root or parent don't seem to be working.
Should I manually re-call applyBindings at some point ? I have seen this must be done on the related DOM nodes, but how can I access those nodes in my setup ?

I added a property to your view model and showed how you can add a root property and reference it with $root and $parent can work here in this fiddle.
var viewModel = {
a: ko.observable('foo'),
myContents: ko.observableArray([]),
complete: function() {
viewModel.myContents.push({
contentTemplate: 'fooTemplate',
b: 'goo',
contentData: {
barAttribute: 'world'
}
});
}
};
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script type="text/html" id="ContainerTemplate">
<span data-bind="template: {
name: contentTemplate,
data: contentData }"></span>
</script>
<script type="text/html" id="fooTemplate">
<span data-bind="text: barAttribute"></span>
<div data-bind="text: $root.a"></div>
<div data-bind="text: $parent.b"></div>
</script>
<button data-bind="click: complete">complete</button>
Hello
<span data-bind="template: { name: 'ContainerTemplate', foreach: myContents }"></span>
!