We Keep Coding

Need a better way to handle complex conditional form logic & validation with Ractive.js

I am currently building a fairly complex form with a lot of conditional logic. by that I mean, when users check one option, 1 or more others maybe revealed or hidden - you've probably seen it many times before..
Using Ractive's mustache templates and many {{#if }} statements I have created the form, but the logic for validation and submission needs improvement. I need to enable the submit button only when all 'visible' fields are valid, so I have concluded that each field needs an isInUse property as well as isValid, see below for an example:
data: {
foo: {
isValid: false,
isInUse: false,
value: ''
}
}
The reason for this is that a field could be made visible but then an option could hide it & it might still have a value that the user does not need to submit.
I have also determined that the only reliable way to change the isInUse property is to create a function in my data that can be accessed from my template, like so:
data: {
foo: {
isValid: false,
isInUse: false,
value: ''
},
isInUse: function (keypath, bool) {
ractive.set(keypath, bool);
}
}
which is used in my templates like so:
{{#if choice.email}}
{{ isInUse('validate.email.isInUse', true) }}
{{ isInUse('validate.phone.isInUse', false) }}
<label for="email">Email</label>
<input type="text" id="email" value="{{validate.email.value}}">
{{/if}}
This means I am able to change the value on the template-side.. which means I can check if each field is in use and valid.. now this is where I am questioning the implementation, is this a good idea?
I have created a simple version of the form on jsbin (which completely works with validation & submission), see here: http://jsbin.com/wasoxa/2/edit?html,js,output but my form is much more complex so I'd like to find a graceful way of handling all of this.

Calling isInUse from within the template is a very creative solution, but unfortunately very likely to break!
You should think of expressions in templates as being read-only - you can call a function within an expression, but only to get its value, never for side-effects such as setting another value (the one possible exception being to log output for debugging). The reason is that you're not in direct control of when the function is called - Ractive handles that on your behalf - so you can get unexpected results. In the example above, changing choice.email from true to false won't have the desired effect.
You probably want computed properties. These can be read inside the template just like regular properties, except that their value depends on other data (or other computed properties):
ractive = new Ractive({
el: 'body',
template: 'twice {{foo}} is {{doubleFoo}}',
data: { foo: 1 },
computed: {
doubleFoo: function () {
return 2 * this.get( 'foo' );
}
}
});
Whenever foo changes, doubleFoo knows (because we called this.get('foo') inside its definition) that it should recompute itself. You can use computed values just like you'd use any other value - e.g. ractive.observe('doubleFoo',doSomething).
This can be useful for validation:
var ractive = new Ractive({
el: 'main',
template: `
<h2>contact type</h2>
<label>
<input type="radio" name="{{contactType}}" value="email"> email
</label>
<label>
<input type="radio" name="{{contactType}}" value="telephone"> telephone
</label>
<h2>name</h2>
<input type="text" value="{{name}}">
<p>name is valid: {{nameIsValid}}</p>
{{#if contactType === "email"}}
<h2>email</h2>
<input type="text" value="{{email}}">
<p>email is valid: {{emailIsValid}}</p>
{{/if}}`,
computed: {
nameIsValid: function () {
return !!this.get( 'name' );
},
emailIsValid: function () {
var email = this.get( 'email' );
// never actually use this regex
return /^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test( email );
}
}
});
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>

Getting text value of radio instead with the actual value in ko.js

I have an ko.js app and I stumbled upon a few troubles.
It is simple to make observable the value of selected radio with checked binding,
But how does one get the text of the following element? Here is what I'm talking about.
<input type="radio" value="323" data-bind="checked: foodId">
<span data-bind="text:foodName"></span>
So I need to get the name of entry from the span, not its actual ID. Here is what is needed in the end after the user makes his choice.
<p>you have selected hamburger</p>
But with ko.js it only seems possible to get the value of radio, but showing message you have selected "323" is not what I need. I think jquery could help, but I've heard using jquery event listeners with ko.js is not recommended.
Edit:
The data looks something like this,
var viewModel = function(){
this.food = ko.observableArray([{foodId: 323, foodName:'hamburger'},
{foodId: 339, foodName:'pizza'}]
}
In the HTML, I use foreach binding to display all entries.
I'm sorry i can't copy the full code, I'm on mobile and have no source currently.
Could you help me with it?

You need to add something to hold the selected value in your view model. Then call a function like the selectedFoodName function I added in order to get the current selected food's name.
// untested but should help you get the idea
var viewModel = function() {
var self = this;
self.selectedFoodId = ko.observable();
self.food = ko.observableArray([{foodId: 323, foodName:'hamburger'},
{foodId: 339, foodName:'pizza'}]);
self.selectedFoodName = ko.computed(function() {
var food = self.food();
var selectedFoodId = self.selectedFoodId();
for (var i = 0, len = food.length; i < len; i++) {
if (food[i].foodId === selectedFoodId) {
return food[i].foodName;
}
}
return "None";
}, self);
};
Then in your html:
<div data-bind="foreach: food">
<input type="radio" data-bind="value: foodId, checked: selectedFoodId" />
<span data-bind="text: foodName"></span>
</div>
<div>Your selected food is: <span data-bind="text: selectedFoodName"></span></div>

KnockoutJS "checked" binding doesn't work with observableArray and radio button lists

I have an observableArray called SelectedAttributeValueIds which I need to be bound to a radio button list using the "checked" binding. e.g.
<input type="radio" data-bind="checked: SelectedAttributeValueIds" />
However KnockoutJS is replacing the observableArray with a single value that is just observable. so instead of the SelectedAttributeValueIds having a value of [123] it will be "123"
I did this as a workaround but was wondering if there is an easier way:
<input type="radio" data-bind="event: { change: function() { $parent.SelectedAttributeValueIds([$data.ID()]); } }" />

For radio buttons, KO assumes that there will only be one "value" to write. For checkboxes, it would add/remove values from the array.
It sounds like you want to always write a single value, but have it be in an array as the only element.
One option would be to create a ko.computed to represent the item in an array. Another option would be to use a writeable ko.computed to bind against the input and have it broker the value between the formats that you want. Something like:
this.SelectedAttributeValueIds = ko.observableArray();
this.SelectedAttributeValueId = ko.computed({
read: function() {
var values = this.SelectedAttributeValueIds();
return values.length ? values[0] : [];
},
write: function(newValue) {
this.SelectedAttributeValueIds([newValue]);
},
owner: this
});

How to create an observable array with undo?

I am trying to add knockout JS to a search page on our website. Currently you open up a jQuery dialog box, which has a number of checkboxes of criteria that you can select.
There are multiple dialogs with multiple types of criteria. When you open the dialog, the checkboxes do not take effect until you hit an "Update" button, if you click cancel or just close the window, the changes you made get reverted and the dialog is set to its former state.
I read this and a few other posts. However this seems to only work with ko.observable, and I cannot seem to get it to work with ko.observableArray.
Has anyone accomplished this or have any ideas?
An example of what I want to do:
Html:
<form>
<div>
<div>
<label><input type="checkbox" data-bind="checked: genders" value="1" />Male</label>
<label><input type="checkbox" data-bind="checked: genders" value="2" />Female</label>
</div>
</div>
<a id="buttonCancel">Cancel</a>
<a id="buttonUpdate">Update</a>
</form>
<div data-bind="text: ko.toJSON(viewModel)"></div>
Javascript:
var viewModel = {
genders: ko.observableArrayWithUndo([])
};
ko.applyBindings(viewModel);
$('#buttonCancel').click(function(){
viewModel.genders.resetChange();
});
$('#buttonUpdate').click(function(){
viewModel.genders.commit();
return false;
});

Here would be one way to approach it:
//wrapper to an observableArray of primitive types that has commit/reset
ko.observableArrayWithUndo = function(initialArray) {
var _tempValue = ko.observableArray(initialArray.slice(0)),
result = ko.observableArray(initialArray);
//expose temp value for binding
result.temp = _tempValue;
//commit temp value
result.commit = function() {
result(_tempValue.slice(0));
};
//reset temp value
result.reset = function() {
_tempValue(result.slice(0));
};
return result;
};
You would bind your checkboxes to yourName.temp and the other part of your UI to just yourName.
Here is a sample: http://jsfiddle.net/rniemeyer/YrfyW/
The slice(0) is one way to get a shallow copy of an array (or even just slice()). Otherwise, you would be performing operations on a reference to the same array.

Given HTML similar to:
<div>
<button data-bind="click: function() { undo(); }">Undo</button>
<input data-bind="value: firstName" />
<input data-bind="value: lastName" />
<textarea data-bind="value: text"></textarea>
</div>
You could use some Knockout code similar to this, basically saving the undo stack as a JSON string representation of the state after every change. Basically you create a fake dependent observable to subscribe to all the properties in the view, alternatively you could manually iterate and subscribe to each property.
//current state would probably come from the server, hard coded here for example
var currentState = JSON.stringify({
firstName: 'Paul',
lastName: 'Tyng',
text: 'Text'
})
, undoStack = [] //this represents all the previous states of the data in JSON format
, performingUndo = false //flag indicating in the middle of an undo, to skip pushing to undoStack when resetting properties
, viewModel = ko.mapping.fromJSON(currentState); //enriching of state with observables
//this creates a dependent observable subscribed to all observables
//in the view (toJS is just a shorthand to traverse all the properties)
//the dependent observable is then subscribed to for pushing state history
ko.dependentObservable(function() {
ko.toJS(viewModel); //subscribe to all properties
}, viewModel).subscribe(function() {
if(!performingUndo) {
undoStack.push(currentState);
currentState = ko.mapping.toJSON(viewModel);
}
});
//pops state history from undoStack, if its the first entry, just retrieve it
window.undo = function() {
performingUndo = true;
if(undoStack.length > 1)
{
currentState = undoStack.pop();
ko.mapping.fromJSON(currentState, {}, viewModel);
}
else {
currentState = undoStack[0];
ko.mapping.fromJSON(undoStack[0], {}, viewModel);
}
performingUndo = false;
};
ko.applyBindings(viewModel);
I have a sample of N-Level undo with knockout here:
http://jsfiddle.net/paultyng/TmvCs/22/
You may be able to adapt for your uses.

Working with a list of checkboxes in knockoutjs

I'm trying to get my head around Knockout.js and I'm quite stuck when it comes to checkboxes.
Server side I'm populating a set of checkboxes with their corresponding values. Now, when any of the unchecked checkboxes are checked, I need to store it's value in a comma-seperated string. When they're unchecked, the value needs to be deleted from the string.
Have anyone got a hint on how to achieve this with knockoutjs?
I have the following code so far:
ViewModel:
$().ready(function() {
function classPreValue(preValue)
{
return {
preValue : ko.observable(preValue)
}
}
var editOfferViewModel = {
maxNumOfVisitors : ko.observable(""),
goals : ko.observable(""),
description : ko.observable(""),
contact : ko.observable(""),
comments : ko.observable(""),
classPreValues : ko.observableArray([]),
addPreValue : function(element) {
alert($(element).val());
this.classPreValues.push(new classPreValue(element.val()));
}
};
ko.applyBindings(editOfferViewModel);
});
And my checkboxes are populated with a foreach loop:
<input data-bind="checked: function() { editOfferViewModel.addPreValue(this) }"
type="checkbox" checked="yes" value='#s'>
#s
</input>
I try to pass the checkbox element as the parameter to my addPreValue() function, but nothing seems to happen when I check the checkbox?
Any help/hints on this is greatly appreciated!

The checked binding expects to be passed a structure that it can read/write against. This could be a variable, an observable, or a writable dependentObservable.
When passed an array or observableArray, the checked binding does know how to add and remove simple values from the array.
Here is a sample that also includes a computed observable that contains the array as comma delimited values. http://jsfiddle.net/rniemeyer/Jm2Mh/
var viewModel = {
choices: ["one", "two", "three", "four", "five"],
selectedChoices: ko.observableArray(["two", "four"])
};
viewModel.selectedChoicesDelimited = ko.computed(function() {
return this.selectedChoices().join(",");
}, viewModel);
ko.applyBindings(viewModel);
HTML:
<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul>
<script id="choiceTmpl" type="text/html">
<li>
<input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" />
<span data-bind="text: $data"></span>
</li>
</script>

Why isn't there a Mutually exclusive checkboxes example Online somewhere
Since this link came up first whilst I was searching for mutually exclusive checkboxes I will share my answer here. I was banging my head against the wall with all my attempts. By the way, when you handle the click event in a binding in-line knockoutjs it seems to disconnect the bindings(maybe only because I tried to call my resetIllnesses function as defined below) even if you return true from the function. Maybe there is a better way but until then follow my lead.
Here is the type I needed to bind.
var IllnessType = function (name,title) {
this.Title = ko.observable(title);
this.Name = ko.observable(name);
this.IsSelected = ko.observable(false);
};
The array to bind with.
model.IllnessTypes = ko.observableArray(
[new IllnessType('IsSkinDisorder', 'Skin Disorder'),
new IllnessType('IsRespiratoryProblem', 'Respiratory Problem'),
new IllnessType('IsPoisoning', 'Poisoning'),
new IllnessType('IsHearingLoss', 'Hearing Loss'),
new IllnessType('IsOtherIllness', 'All Other Illness')]
);
The reset illness function to clear them all.
model.resetIllnesses = function () {
ko.utils.arrayForEach(model.IllnessTypes(), function (type) {
type.IsSelected(false);
});
};
The markup
<ul data-bind="foreach:IllnessTypes,visible: model.IsIllness()">
<li><label data-bind="html: Title"></label></li>
<li><input class="checkgroup2" type="checkbox"
data-bind="attr:{name: Name },checked:IsSelected" /></li>
</ul>
This just doesn't work
If you have been struggling with trying to call the resetIllness function as I below, you will feel my pain.
<input type='checkbox' data-bind="checked:IsSelected,
click: function() { model.resetIllnesses(); return true; }" />
you have been sharing my pain. Well, it works! when you call it from following example.
Notice that there is a class that I added above so that I can add the click function.
The script that makes all your problems go away.
<script type="text/javascript">
$(function() {
$(".checkgroup2").on('click', function() {
model.resetIllnesses();
var data = ko.dataFor(this);
data.IsSelected(true);
});
});
</script>
Send info to the server
Also, in my case I had to send the information up to the server differently than the default html format so I changed the inputs a little.
<input class="checkgroup2" type="checkbox" data-bind="checked:IsSelected" />
<input type="hidden" data-bind="attr:{name: Name },value:IsSelected" />