javascript - 除非指定 'write' 选项，否则计算错误 : Cannot write a value to a ko.。如果你想读取当前值，不要传递任何参数

Question

我使用下面的链接根据输入文本对选择选项进行过滤:1. http://jsfiddle.net/tyrsius/67kgm/2. http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html3. Using Knockout to Filter ViewModel Data Using Multiple Fields/Columns and Controls

遇到错误:除非指定“写入”选项，否则无法将值写入 ko.computed。如果您想读取当前值，请不要传递任何参数。

做了一些研究，找到了下面的链接来解决1. Possible Bug: Breeze.js 1.5 -- Cannot write a value to a ko.computed unless you specify a 'write' option2. Cannot write a value to a ko.computed unless you specify a 'write' option

但仍然面临无法找到解决方案的错误。任何人都可以帮助我我知道这个问题大部分时间都被问过。具有讽刺意味的是，我找不到解决方案。错误在哪里？？。

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>

Answer 1

你应该试试这样的东西

查看:

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

View 模型:

$(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());
            });
        }
    });
};

工作 fiddle here