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

看起来像在调用compute时，$ ls docs/css_notes docs/css_notes/css_crib_notes.md docs/css_notes/css_crib_notes.html $ git rm docs/css_notes/css_crib_notes.html $ git commit -m "Removed html exported version of markdown file"没有数据。您可以使用observableArray而不是Computer吗？或计算得出的要求？

Answer 2

当ajax调用返回时，您将UsuarioPeronals设置为等于原始数据。数据没有可观察的属性，它们只是文本，因此当您尝试将带括号的电子邮件用作可观察的（... || rec.Email().toLowerCase()...）时，过滤器函数将引发错误。

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

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

剔除过滤器无法正常工作

2 个答案: