Develop Reference

Datetimepicker binding in knockout.js not working

I have a view with a datetimepicker. I am not able to bind it in Knockout. Since the datetime picker end of the day has a textbox, I bind it the same way as other textboxes(which works fine) and assume it to contain the datetime value in text format but it does not get binded.
<div class='input-group date' id='datetimepicker1'>
<input type="text" class="form-control" id="estimatedTime" data-bind="value: estimatedTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input type="number" class="form-control" id="estimatedAmt" data-bind="value: estimatedAmount">
This is my script which does not work for datetimepicker(estimatedTime) but works for a normal textbox(EstimatedAmount).
var Model = function () {
var self = this;
self.estimatedTime= ko.observable(initialData.estimatedTime);
self.estimatedAmount= ko.observable(initialData.EstimatedAmount);
self.update = function () {
});
}
ko.applyBindings(new Model());
Why is there a difference and what is the easiest way to fix it?

You need a binding handler to incorporate another DOM-manipulating entity into Knockout. See this datetimepicker fiddle for an example.
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
//initialize datepicker with some optional options
var options = {
format: 'DD/MM/YYYY HH:mm',
defaultDate: valueAccessor()()
};
if (allBindingsAccessor() !== undefined) {
if (allBindingsAccessor().datepickerOptions !== undefined) {
options.format = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : options.format;
}
}
$(element).datetimepicker(options);
var picker = $(element).data('datetimepicker');
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "dp.change", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
var defaultVal = $(element).val();
var value = valueAccessor();
value(moment(defaultVal, options.format));
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
if (widget.date) {
widget.setValue();
}
}
}
};

knockout.js how to set selected option after confirm() cancelled within a ko.computed write

i have a selector element with options and default text:
self._selected = ko.observable();
self.option = ko.computed({
read:function(){
return self._selected;
},
write: function(data){
if(data){
if(confirm('are you sure?')){
self._selected(data);
}else{
//reset
}
}
}
});
<select data-bind="options: options, value:option, optionsCaption: 'choose ...'"></select>
the problem this:
select "one"
on the confirm click cancel
the selected option is "one" still under focus
it should be "choose ..."
jsbin here, it was tested on chrome only

The problem is that the value of the underlying variable is not changing, so there's no event to tell Knockout that its value is out of sync with the viewmodel.
With a normal observable, you can call valueHasMutated to indicate that some occult change has happened, but computeds don't seem to have that. But they do have notifySubscribers. In fact, your example is very much like this example in the docs.
Here's a working example:
function vm() {
const self = {};
self.options = ko.observableArray(['one', 'two', 'three']);
self._selected = ko.observable();
self.option = ko.pureComputed({
read: self._selected,
write: function(data) {
if (data) {
if (confirm('are you sure?')) {
self._selected(data);
} else {
self.option.notifySubscribers(self._selected());
}
}
}
});
return self;
}
ko.applyBindings(vm());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value:option, optionsCaption: 'choose ...'"></select>
<div data-bind="text:_selected"></div>
<div data-bind="text:option"></div>

There is an asymmetry here:
When you change the value of a select box, the DOM gets updated immediately and knockout afterwards (of course, knockout depends on the DOM change event). So when your code asks "Are you sure?", the DOM already has the new value.
Now, when you do not write that value to the observable bound to value:, the viewmodel's state does not change. And knockout only updates the DOM when an observable changes. So the DOM stays at the selected value, and the bound value in your viewmodel is different.
The easiest way out of this is to save the old value in a variable, always write the new value to the observable, and simply restore the old value if the user clicks "no". This way the asymmetry is broken and the DOM and the viewmodel stay in sync.
var AppData = function(params) {
var self = {};
var selected = ko.observable();
self.options = ko.observableArray(params.options);
self.option = ko.computed({
read: selected,
write: function(value) {
var oldValue = selected();
selected(value);
if (value !== oldValue && !confirm('are you sure?')) {
selected(oldValue);
}
}
});
return self;
};
// ----------------------------------------------------------------------
ko.applyBindings(new AppData({
options: ['one','two','three']
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value: option, optionsCaption: 'Select...'"></select>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
This is a perfect candidate for a knockout extender that asks for value change confirmation. This way we can re-use it for different observables and keep the viewmodel clean.
ko.extenders.confirmChange = function (target, message) {
return ko.pureComputed({
read: target,
write: function(newValue) {
var oldValue = target();
target(newValue);
if (newValue !== oldValue && !confirm(message)){
target(oldValue);
}
}
});
};
// ----------------------------------------------------------------------
var AppData = function(params) {
var self = this;
self.options = ko.observableArray(params.options);
self.option = ko.observable().extend({confirmChange: 'are you sure?'});
};
// ----------------------------------------------------------------------
ko.applyBindings(new AppData({
options: ['one','two','three']
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value: option, optionsCaption: 'Select...'"></select>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Knockout validation extend 'required only if' with observable parameter

Is there a way to extend an observable to make it required only if and observable is true, and that changes can be tracked?
For example, I got this custom extender:
ko.extenders.requiredOnlyIf = function (target, makeRequired) {
target.HasError = ko.observable();
function validate(newValue) {
if (makeRequired) {
target.HasError(newValue ? false : true);
} else {
target.HasError(false);
}
}
validate(target());
target.subscribe(validate);
return target;
}
And this observables:
self.Field1 = ko.observable().extend({ requiredOnlyIf : self.Field2() });
self.Field2 = ko.observable().extend({ requiredOnlyIf : self.Field1() });
This observables are dependant, so, if one is filled, the other must be filled too. But the extender only works fine when the value is binding the first time, but when the value of any of the observables is changed is not working.

A couple of things:
You need to pass the observables, not the observables' contents, when setting up the extensions. (You can't create Field1 based on Field2 before Field2 exists, either.)
You need two subscriptions, so that if a change to one makes the other invalid, that is noticed.
(update) Rather than subscriptions and an observable, you can use a computed
ko.extenders.requiredOnlyIf = function(target, makeRequired) {
target.HasError = ko.pureComputed(() => {
const otherHasValue = !!makeRequired();
const targetHasValue = !!target();
return otherHasValue && !targetHasValue;
});
return target;
}
self = {};
self.Field1 = ko.observable();
self.Field2 = ko.observable().extend({
requiredOnlyIf: self.Field1
});
self.Field1.extend({
requiredOnlyIf: self.Field2
});
ko.applyBindings(self);
.invalid {
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: Field1, css: {invalid: Field1.HasError()}" />
<input data-bind="value: Field2, css: {invalid: Field2.HasError()}" />

How to applyBindings and keep input values with Knockout JS?

I'm building a HTML/KnockoutJS application. My webserver returns a form with input fields with information. When I new up my model and do an ko.applyBindings, naturally the input values are overwritten by the model.
Is there a way to do an ko.applyBindings in which the model is automatically loaded with the data of the input fields?
Example: https://jsfiddle.net/KeesCBakker/p7ygq5y2/1/
HTML:
Title: <input data-bind="textInput: title" value="MyTitle" placeholder="Nothing here!" /><br/>
Text: <input data-bind="textInput: text" value="MyText" placeholder="Nothing here!" /><br/>
<button id="bind">Bind!</button>
JS:
ko.bindingHandlers.initFromInput = {
init: function(element, valueAccessor) {
valueAccessor()(element.value);
}
};
function Model() {
this.title = ko.observable();
this.text = ko.observable();
}
document.getElementById('bind').onclick = function() {
var model = new Model();
ko.applyBindings(model);
};

You could use a custom binding, that tells Knockout to use the input values as default, like this:
ko.bindingHandlers.initFromInput = {
init: function(element, valueAccessor) {
valueAccessor()(element.value);
}
};
Here's a jsfiddle: http://jsfiddle.net/kv3zras3/3/
EDIT:
With the new binding, your data-binds should look something like this:
<input data-bind="initFromInput: title, value: title" value="MyTitle" placeholder="Nothing here!" />
<input data-bind="initFromInput: text, value:text" value="MyText" placeholder="Nothing here!" />
EDIT:
There's an abit nicer way of achieving this, if you make like binding look like this:
var origValueInput = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function(element, valueAccessor, allBindings) {
if (allBindings.has('initValueFromInput')) {
valueAccessor()(element.value);
}
origValueInput.apply(this, arguments);
};
You can write your data-binds like this:
<input value="MyTitle" data-bind="initValueFromInput, value: title"/>
<input value="MyText" data-bind="initValueFromInput, value: text"/>
Here's a fiddle: https://jsfiddle.net/yy51kok5/

I've ended up improving the answer from clean_coding. Add the following anonymous method to a script after loading KnockoutJS. It will reroute both textInput and value handlers.
(function () {
var z = ko.bindingHandlers.textInput.init;
ko.bindingHandlers.textInput.init = function (element, valueAccessor, allBindings) {
if (allBindings.has('initWithElementValue')) {
valueAccessor()(element.value);
}
z.apply(this, arguments);
};
var y = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function (element, valueAccessor, allBindings) {
if (allBindings.has('initWithElementValue')) {
valueAccessor()(element.value);
}
y.apply(this, arguments);
};
}())
It can be used, by specifying it after the textInput or value declaration:
<input type="text" data-bind="textInput: title, initWithElementValue" />

Ended up creating a plugin for Knockout. Added it to GitHub as well.
<script type="text/javascript" src="https://cdn.rawgit.com/KeesCBakker/KnockoutAutomaticFormValueBinding/master/knockout-automatic-form-value-binding-1.0.min.js"></script>
Include the plugin
Set ko.automaticFormValueBinding = true;
Bind ko.applyBindings({yourmodel});
More info at Git: https://github.com/KeesCBakker/KnockoutAutomaticFormValueBinding

KnockoutJS setting focus after adding to array/collection

I have viewmodel with an array of diagnosis codes. In my html I have a button data-bound to a click that adds a blank diagnosis code to the array. This all works.
What I cant figure out, is how to set focus to the dynamically added textbox when a code is added. What can I add :
<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3>
<div data-bind="foreach:DiagnosisCodes">
<div><input type="text" data-bind="value:$data"/>
</div>
</div>
<script type="text/javascript">
function AddDiagnosisCode(item)
{
item.DiagnosisCodes.push("");
}
var vm = {
"DiagnosisCodes": ["2345","6789"]
};
var viewModel = ko.mapping.fromJS(vm);
ko.applyBindings(viewModel);
</script>

Use the built-in binding hasFocus and set it to true
<input type="text" data-bind="value:$data, hasFocus: true">
See http://jsfiddle.net/eT3Y8/

It can be done with a custom binding. The harder part in this approach is to not focus on the boxes of the elements that are initially in the list. That's why I needed an extra isNew property, which is false for the already existing elements. I also used jquery to focus :) Fiddle: http://jsfiddle.net/hv9Dx/1/
html:
<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3>
<div data-bind="foreach:DiagnosisCodes">
<div><input type="text" data-bind="value:value, focusOnCreate:isNew()"/>
</div>
</div>
js:
var Record = function(value, isNew){
var self = this;
self.value = ko.observable(value);
self.isNew = ko.observable(isNew || false);
}
var VM = function() {
var self = this;
self.DiagnosisCodes = ko.observableArray([
new Record("2345"),
new Record("6789")]);
self.enableFocus = ko.observable(true);
self.AddDiagnosisCode = function(){
self.DiagnosisCodes.push(new Record("", true));
}
}
ko.bindingHandlers.focusOnCreate = {
init:function(element, valueAccessor, allBindings, viewModel, bindingContext) {
if(valueAccessor()){
$(element).focus();
}
}
}
ko.applyBindings(new VM());