【问题标题】: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错误:除非您指定“写入”选项,否则无法将值写入 ko.computed。如果您想读取当前值,请不要传递任何参数
【发布时间】:2015-03-25 23:01:27
【问题描述】:

我已使用以下链接根据输入文本对选择选项进行过滤: 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

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

做了一些研究,发现下面的链接来解决 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

但仍然面临无法找到解决方案的错误。谁能帮助我,我知道这个问题大部分时间都在问。具有讽刺意味的是,我无法找到解决方案。错误在哪里??。

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>

【问题讨论】:

  • 您可以尝试制作一个示例 repro(jsfiddle.net) 来重现您的问题。简而言之,计算的和可观察的不应具有相同的名称 self.PositionTypeJobDesc 。欢呼
  • self.PositionTypeJobDesc 是一个 ko.observableArray([])。我们如何在 obserableArray 上执行计算.????
  • 这样的事情你应该执行jsfiddle.net/supercool/74dh736s/47。欢呼
  • @supercool - 谢谢你对我有用....很好的样品......喜欢它

标签: javascript jquery knockout.js


【解决方案1】:

你应该试试这样的

查看:

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

视图模型:

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

工作小提琴here

【讨论】:

  • 上面的代码如我所愿。我已经使用敲除将相同的概念应用于输入框事件“Keyup”......对于其他浏览器它可以工作。但是 Internet Explorer 在文本框上有清晰的图标。在清除图标时,它会清除文本框中的文本。但是过滤器不起作用。请告诉我如何解决这个问题。
猜你喜欢
  • 2013-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-22
相关资源
最近更新 更多