knockout binding using a dropdown to prepopulate a textbox

Question

I have a select element and a text input element on a modal dialog box. I want to select an option from the select input and use the value to prepopulate the text input element (this just helps the user with a prefilled name and then allows the user to override that name should they wish).

I have a list of cars in my garage, they all have a Model and a name.

var carTypes = [{"id":1,"name":"Audi"}, {"id":2,"name":"BMW"}, {"id":3,"name":"Mercedes"}];

var Car = function() {
    var self = this;
    self.typeId = ko.observable();
    self.name = ko.observable();
    self.typeName = ko.computed(function() {
        var nam =  $.grep(carTypes, function(item) { return item.id == self.typeId(); });
        return name;
    };
}

var ViewModel = function() {
    var self = this;
    self.carTypes = carTypes;
    self.selectedCar = ko.observable();
    self.saveCar = function() {
        // push the data from selectedCar to self.cars array
        // close the dialog
    };
    self.editCar = function(item, event) { 
        self.selectedCar(item);
        // display the dialog
    };
    self.cars = ko.observableArray([]);
}

ko.bindingHandlers.initialName = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        bindingContext.$data.name(value);
    }
};

ko.applyBindings(new ViewModel());


<div data-bind="foreach: cars">
    <div data-bind="click: editCar">
        <div>Type: <div data-bind="text: typeName"/></div>
        <div>Name: <div data-bind="text: name" /></div>
    </div>
</div>

<div id="carDialog">
    <div data-bind="with: selectedCar">
        <select data=bind="options: $root.carTypes, optionsText: 'name', optionsValue: 'id', value: typeId", optionsCaption: 'Pick a car type'></select>
        <input data-bind="value: name", initialName: carTypeName"/>
    </div>
</div>

I wrote a custom binding handler to help me but am not sure if I've done it right or whether I can achieve something similar using a subscription on the typeId?

If I have a car saved with the following data:

{ typeId: 2, name: 'My new BMW'}

The problem is when I select this item to edit, the name always shows 'BMW', instead of 'My new BMW'

This apparent simple problem is proving a laughing stock to m'colleagues who berate my choice of knockout citing how simple it would be in jQuery.

Any help appeciated and apols in advance if the code is not full but my actual implementation is slightly larger but I hope I have provided enough pertinent code to explain the issue Thanks

Answer 1

Though it's possible, you'll have trouble creating a binding handler for this, because those are meant to handle interaction with one (part of the) view model and one part of the DOM.

What you have is dependencies between two pieces of the ViewModel. With MVVM, figure out how to do that correctly, and let the mvvm-framework handle the DOM updates.

Either a subscription, or equivalent a writeable computed will be able to do this. Once the select is changed and thus the VM property is updated, you set a default name.

For example:

var Car = function(carType) {
    var self = this,
        _type = ko.observable();;
  
    self.name = ko.observable("");
  
    self.type = ko.computed({
        read: _type,
        write: function(newValue) {
            var oldDefaultName = !!_type() ? "My new " + _type().name : "";
            var newDefaultName = !!newValue ? "My new " + newValue.name : "";
          
            if (self.name() === oldDefaultName) {
                self.name(newDefaultName);
            }
            
            _type(newValue);
        }
    });
  
    self.type();
}

var ViewModel = function() {
    var self = this;
  
    self.carTypes = [{"id":1,"name":"Audi"}, {"id":2,"name":"BMW"}, {"id":3,"name":"Mercedes"}];
    
    self.newCar = ko.observable(new Car(self.carTypes[0]));  
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="carDialog">
    <div data-bind="with: newCar">
        <select data-bind="options: $root.carTypes, optionsText: 'name', value: type, optionsCaption: 'Pick a car type'"></select>
        <input data-bind="value: name"/>
    </div>
</div>

Because your sample code wasn't runnable (it had syntax errors, some missing pieces, and things I didn't understand without seeing it work), I had to make some assumptions and do some things differently.

If you must use a binding handler, you need to take the logic from the computed above and apply it to the appropriate parts of the bindingContext.