敲除过滤器无法正常工作

Question

我有这个淘汰赛观点

var ViewModel = function (data) {
if (data != null) {
        ko.mapping.fromJS(data, { UsuarioPersonals: UsuarioPersonalMapping }, 
self);
    }
var self = this;
self.UsuarioPersonals = ko.observableArray();
self.search_UsuarioPersonals = ko.observable(''); 



var UsuarioPersonalsUri = '/api/UsuarioPersonals/';


function ajaxHelper(uri, method, data) {
    self.error(''); // Clear error message
    return $.ajax({
        type: method,
        url: uri,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        self.error(errorThrown);
    });
}

function getAllUsuarioPersonals() {
    ajaxHelper(UsuarioPersonalsUri, 'GET').done(function (data) {
        self.UsuarioPersonals(data);
    });
}



self.filteredRecords = ko.computed(function () {
    return ko.utils.arrayFilter(self.UsuarioPersonals(), function (rec) {
        return (
            (self.search_UsuarioPersonals().length == 0 || rec.Email().toLowerCase().indexOf(self.search_UsuarioPersonals().toLowerCase()) > -1)
        )
    });
});  


   var UsuarioPersonalsDetail = function (data) {
        var self = this;
        if (data != null) {
            self.Id = ko.observable(data.Id);
            self.Email = ko.observable(data.Email);
            self.Password = ko.observable(data.Password);

        }
    }


    var UsuarioPersonalMapping = {
        create: function (options) {
            return new UsuarioPersonalsDetail(options.data);
        }
    };

// Fetch the initial data.
getAllUsuarioPersonals();


};

ko.applyBindings(new ViewModel());

和 html 我希望按电子邮件字段过滤记录的页面。

<div class="row">
<div class="col-md-3">
    email:   <input data-bind="value: search_UsuarioPersonals, valueUpdate: 'afterkeydown'" /><br />
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">Filtro</h2>
        </div>
        <table class="table">
            <tbody data-bind="foreach: filteredRecords">
                <!-- <tr><td> Nombre contiene: <input data-bind=" value:=" valueupdate: ="" /></td></tr>-->
                <!--<tbody data-bind="foreach: filteredRecords">-->
                <tr>
                    <td data-bind="text: Id"></td>
                    <td data-bind="text: Email"></td>
                    <td data-bind="text: Password"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

过滤结果正确显示有什么问题？因此，从服务器获取的数据会使用电子邮件字段进行过滤。每次加载页面时，所有数据字段都是正确的数据绑定但是当我在输入字段中写入值时没有任何反应。

Answer 1

看起来在调用 computed 时，self.UsuarioPersonals() 没有数据。您可以使用 observableArray 而不是 computed 吗？还是需要计算？

Answer 2

当您 ajax 调用 returns 时，您将 UsuarioPeronals 设置为等于原始数据。数据没有可观察的属性，它们只是文本，因此当您的过滤器函数尝试使用带括号的 Email 时会抛出错误，就像它是可观察的 (... || rec.Email().toLowerCase()...).

function getAllUsuarioPersonals() {
    ajaxHelper(UsuarioPersonalsUri, 'GET').done(function (data) {
        self.UsuarioPersonals(data);
    });
}

您需要在其上使用您在视图模型顶部引用的相同 UsuarioPersonalMapping 或遍历返回的数据并为每个数据创建一个新的 UsuarioPersonalsDetail。

敲除过滤器无法正常工作

knockout filter doesn't works right

html

filter

knockout.js