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

Ember 2 : dynamic CSS class with parameters

I'm currently on an Ember 2.4 project and I'm integrating a form divided in "steps", like this :
<form>
<div id="step_1">
<!-- blabla -->
</div>
<div id="step_2">
<!-- blabla -->
</div>
<div id="step_3">
<!-- blabla -->
</div>
</form>
I would like to display only one item in the same time.
I would like to manage it dynamically because this form can evolve in lots of steps...
The idea I had was to use a currentStep var in the controller, and a test that check if the parameter passed was the currentStep.
But in Ember and Handlebars, seems impossible to use methods giving arguments to make a test, something like that for example :
<div id="step_1" class={{isCurrentStep(1)}}>
<!-- blabla -->
</div>
<div id="step_2" class={{isCurrentStep(2)}}>
<!-- blabla -->
</div>
<div id="step_3" class={{isCurrentStep(3)}}>
<!-- blabla -->
</div>
Or, at least, something like that :
<div id="step_1" class={{isCurrentStep(1):visible:invisible}}>
<!-- blabla -->
</div>
<div id="step_2" class={{isCurrentStep(2):visible:invisible}}>
<!-- blabla -->
</div>
<div id="step_3" class={{isCurrentStep(3):visible:invisible}}>
<!-- blabla -->
</div>
The idea behind is to manage a function like :
isCurrentStep: function(id){
return this.get('currentStep') == id ? "visible" : "hidden";
}
Or even simply returning true / false and manage the class toggle in the HBS file.
Do you have a "not complicated" solution, or even a better idea to manage my problem, to do that ? I don't wanna create as much functions as there are steps, like :
isCurrentStep1: function(){
return this.get('currentStep') == 1;
}
isCurrentStep2: function(){
return this.get('currentStep') == 2;
}
isCurrentStep3: function(){
return this.get('currentStep') == 3;
}

I would recommend to write a component for each step and use the {{component}} helper to show your current component. Or maybe even use your router.
But what you want is also easy. You need a property currStep on your controller/component, and a simple is-equal helper:
//helpers/is-equal
import Ember from 'ember';
export function boolOr([left, right]/*, hash*/) {
return return left == right;
}
export default Ember.Helper.helper(boolOr);
then you can do this in your template:
<div class="{{if (is-equal currStep '1') 'visible' 'invisible'}}">...</div>

How can I output a KnockoutJs value in an HTML comment

I have a foreach loop that looks something like this in a slimmed version.
<div data-bind="foreach: articles">
<h1 data-bind="text: title"></h1>
</div>
Now I want to add a HTML comment with a value from the binding. The resulting HTML should be rendered like this.
<div data-bind="foreach: articles">
<h1 data-bind="text: myTitle">My title</h1>
<!-- My property value -->
</div>
I want "< ! -- My property value - - >" to come from a property in the current foreach binding. I hoped it would be possible with something simple as
<!-- myProperty -->
Is this possible and if it is, how can I accomplish this?
Thanks.
EDIT:
My solution that I don't like and try to replace with a "good" solution.
<div data-bind="foreach: articles">
<h1 data-bind="text: myTitle">My title</h1>
<p style="display:none;" data-bind="html: $root.commentValue(myProperty)"></p>
</div>
self.commentValue = function (valueToComment) {
return '<!-- ' + valueToComment + ' -->';
}

The only thing that works is this one:
<div data-bind="html: '<!--' + WeightInGramms() + '-->'"></div>
But it has an obvious side effect: there is also a div rendered.
The solution would be using a virtual element like this:
<!-- ko html: "<!--" + WeightInGramms() + '--' + '>' -->
<!-- /ko -->
It nearly works, but there is a big problem: you cannot use html binding in a virtual element (apart from the hack of converting '-->' into '--' + '>' so that it's not confused with the virtual element comment closing).
So, the only possible solution is to create your own custom binding, but making it valid to be used as a virtual element binding.
ko.bindingHandlers['comment'] = {
'init': function(elem, valueAccessor) {
var value = ko.unwrap(valueAccessor());
var comment = $('<!--'+value+'-->')[0];
ko.virtualElements.setDomNodeChildren(elem, [comment]);
},
'update': function (elem, valueAccessor) {
var value = ko.unwrap(valueAccessor());
var comment = $('<!--'+value+'-->')[0];
ko.virtualElements.setDomNodeChildren(elem, [comment]);
}
};
ko.virtualElements.allowedBindings.comment = true;
var vm = {
aComment: ko.observable("This is a comment")
}
ko.applyBindings(vm);
<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>
<input type="text" data-bind="value: aComment"></div>
<!--ko comment: aComment --><!-- /ko -->
It's still no perfect because you cannot delete the virtual binding tags, but it's much cleaner than adding a real tag to include the comment. Note that the custom binding implementation uses the special ko.virtualElements API to support virtual elements.

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