фильтр выбивки не работает правильно

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>

что плохого в том, что отфильтрованные результаты показывают правильно? Таким образом, данные, полученные с сервера, фильтруются с помощью поля Email. Каждый раз, когда страница загружается, все поля данных вставляются в правильную привязку данных, но когда я записываю значение в поле ввода, ничего не происходит.

Answer 1

Когда ваш вызов ajax возвращается, вы устанавливаете UsuarioPeronals равным необработанным данным. Данные не имеют наблюдаемых свойств, они просто текстовые, поэтому ваша функция фильтра выдает ошибку, когда пытается использовать электронную почту с круглыми скобками, как будто это наблюдаемая (... || rec.Email().toLowerCase()...).

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

Вам нужно будет использовать тот же UsuarioPersonalMapping, на который вы ссылаетесь в верхней части модели просмотра, или перебирать возвращаемые данные и создавать для каждого новый UsuarioPersonalsDetail.

Answer 2

Похоже, что при вычислении вызывается, self.UsuarioPersonals() не имеет данных. Можете ли вы использовать observableArray вместо computed? или вычисляется ли это требование?