CODEWITHSUNDEEP
javascriptjqueryknockout.js
San Jaisy
San Jaisy

Reputation: 17138

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

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>

Upvotes: 1

Views: 5290

Answers (1)

super cool
super cool

Reputation: 6045

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

Upvotes: 2

Related Questions