Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters

Question

I have use the below link to make a filter on select option based on input text : 1. http://jsfiddle.net/tyrsius/67kgm/ 2. http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html 3. Using Knockout to Filter ViewModel Data Using Multiple Fields/Columns and Controls

Faced a Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.

Did some research and found the below link to solve 1. Possible Bug: Breeze.js 1.5 -- Cannot write a value to a ko.computed unless you specify a 'write' option 2. Cannot write a value to a ko.computed unless you specify a 'write' option

But still facing the error not able to find out the solution. Can anyone please help me I know this question has been ask most of the time . Ironically I am not able to find the solution.Where is the mistake??.

function AccessLevelVM() {
        var self = this;

    self.AccessLevel_nameSearch = ko.observable();

self.PositionTypeJobDesc = ko.computed(function () {
        var filter = self.AccessLevel_nameSearch();
        if (!filter) {
            return self.PositionTypeJobDesc();
        } else {
            return ko.utils.arrayFilter(self.PositionTypeJobDesc(), function (item) {
                return ko.utils.stringStartsWith(PositionTypeJobDesc.PositionByDept.toLowerCase(), filter.toLowerCase());
            });
        }
    });

}



$(document).ready(function () {


    ko.utils.stringStartsWith = function (string, startsWith) {
        string = string || "";
        if (startsWith.length > string.length) return false;
        return string.substring(0, startsWith.length) === startsWith;
    };

    var Model = new AccessLevelVM()

    ko.applyBindings(Model, document.getElementById('AccessLevelForm'));


});

HTML

<div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="input-group">
                                <input type="text" name="SearchAccessLevel" class="form-control" placeholder="search" data-bind="value: AccessLevel_nameSearch, valueUpdate: 'afterkeydown'"  />
                                <span class="input-group-addon glyphicon glyphicon-search"></span>
                            </div>
                        </div>
                    </div>

                    <div class="well" style="max-height: 300px;">
                        <select class="form-control input-sn" style="width: 94%;" size="4" name="sometext"
                            data-bind="options: PositionTypeJobDesc, optionsText: 'PositionByDept', optionsValue: 'PositionDepartmentRelId', optionCaption: ' Choose Job Position ... ', value: selectedPositionType, validationElement: selectedPositionType, event: { change: OnChangeJobPosition } " data-required="true">
                        </select>
                    </div>
                </div>

can you try making a sample repro(jsfiddle.net) which reporduces your issue . inshort computed & observable should not have same name `self.PositionTypeJobDesc` . cheers — super cool, Mar 25 '15 at 11:34
self.PositionTypeJobDesc is an ko.observableArray([]). How we can perform compute on obserableArray.???? — San Jaisy, Mar 25 '15 at 11:47
something like this you should perform http://jsfiddle.net/supercool/74dh736s/47/ . cheers — super cool, Mar 25 '15 at 12:06
@super cool - thank u it work for me .......... nice sample ... loved it — San Jaisy, Mar 25 '15 at 13:39

score 2 · Accepted Answer · answered Mar 25 '15 at 15:01

You should try something like this

View:

<input type="text" data-bind="value:search" />
<div data-bind="foreach:filteredArray">
    <span data-bind="text:name"></span>
</div>

ViewModel:

$(function() {
    ko.applyBindings(new ViewModel());
});

var ViewModel = function () {
    self.array=ko.observableArray([{'name':'charlie'},{'name':'sheen'}]);
    self.search=ko.observable();
    self.filteredArray= ko.computed(function () {
        var filter = self.search();
        if (!filter) {
            return self.array();
        } else {
          return ko.utils.arrayFilter(self.array(), function (item) {
                return ko.utils.stringStartsWith(item.name.toLowerCase(), filter.toLowerCase());
            });
        }
    });
};

Working fiddle here

The above code work awesome as i wanted. I have applied the same concept to input box event "Keyup" using knockout ....... For other browser it working. However Internet Explorer has clear icon on textbox. On clear of icon it clear the text from textbox. However filter don't work. Please tell me how to solve this. — San Jaisy, Mar 26 '15 at 17:27

Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters

1 Answers1