Question

is it possible use the ko.computed write function on the foreach $data variable like this?

<!-- ko foreach: activeAttributes.optionsSplitted -->
    <input type="text" data-bind="value: $data">
<!-- /ko -->


vm.activeAttributes.optionsSplitted = ko.computed({
    read: function(){
        return vm.activeAttributes().options().split("-*!*-");      
    },
    write: function(){
        alert("changed");
    }
});

Answer 1

The thing is that your computed observable only detects changes on the array, activeAttributes.optionsSplitted. The textboxes are bound to the individual items so since you never actually change the value of activeAttributes.optionsSplitted, no alert is made.

If you want to be able to do this, you have a couple of options.

Bind to the change event for your inputs so you can do what you want when a value changes in the input.

<input type="text" data-bind="value: $data, event: { change: $root.changed }">

(fiddle)

---

Or, you could map the values to objects that contain observable properties and perform the checks there. You cannot detect changes on the object itself (any changes will be replacements) so you would have to map the value to an object with the writable-computed property.

self.activeAttributes.optionsSplitted = ko.computed(function(){
    var options = self.activeAttributes().options().split("-*!*-");
    return ko.utils.arrayMap(options, function (option) {
        // does not work
        //return ko.computed({
        //    read: function () { return option; },
        //    write: function (value) { alert('changed'); }
        //});
        return {
            value: ko.computed({
                read: function () { return option; },
                write: function (value) { alert('changed'); }
            })
        };
    });
});

Then bind to the property.

<input type="text" data-bind="value: value">

(fiddle)

---

These aren’t your only options of course, there are probably other things you could do here but these are what come to mind.