过滤可剔除的可观测阵列时没有数据。

Question

我试着让一个搜索框和一个可观察的数组一起工作。我希望让用户输入文本，并根据名字或姓氏显示匹配的值。

下面是HTML和JavaScript。

每次尝试使用计算函数时，都不会显示任何内容。如果我只使用employee数组，就会得到DB中的数据。我肯定这是很小的东西但我很茫然。

​

var ViewModel = function () {
    var self = this;
    self.employees = ko.observableArray();
    self.interests = ko.observableArray();
    self.error = ko.observable();
    self.detail = ko.observable();
    self.newEmployee = {
        LastName: ko.observable(),
        FirstName: ko.observable(),
        StreetAddress: ko.observable(),
        State: ko.observable(),
        Zip: ko.observable(),
        Age: ko.observable(),
        Image: ko.observable()
    }

    var employeeUri = '/api/employees/';
    var interestsUri = '/api/interests/';

    function getInterests() {
        ajaxHelper(interestsUri, 'GET')
            .done(function(data) {
                self.interests(data);
            });
    }

    self.addEmployee = function(formElement) {
        var employee = {
            FirstName: self.newEmployee.FirstName,
            LastName: self.newEmployee.LastName,
            StreetAddress: self.newEmployee.StreetAddress,
            State: self.newEmployee.State,
            Zip: self.newEmployee.Zip,
            Age: self.newEmployee.Age,
            Image: self.newEmployee.Image
        };

        ajaxHelper(employeeUri, 'POST', employee)
            .done(function(item) {
                self.employees.push(item);
            });
    }

    getInterests();

        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 getAllEmployees() {
            ajaxHelper(employeeUri, 'GET').done(function (data) {
                self.employees(data);
            });
        }

        self.getEmployeeDetail = function(item) {
            ajaxHelper(employeeUri + item.Id, 'GET')
                .done(function(data) {
                    self.detail(data);
                });
        }

        // Fetch the initial data.
        getAllEmployees();

        self.filteredPeople = ko.computed(function () {
            var filter = self.filter().toLowerCase();
            if (!filter) {
                return this.employees();
            } else {
                return ko.utils.arrayFilter(this.employees(),
                    function (item) {
                        return ko.utils.stringStartsWith(item.FirstName().toLowerCase(), filter) ||
                            ko.utils.stringStartsWith(item.LastName().toLowerCase(), filter);
                    });
            }
        });
    };

    ko.applyBindings(new ViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
@section scripts {
    @Scripts.Render("~/bundles/app")
}

<div class="page-header">
    <h1>People Finder</h1>
</div>

<div class="row">

    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">People Search Application</h2>
            </div>
            <div class="panel-body">
                    <input type="text" class="form-control" data-bind="value: filter valueUpdate: 'keyup'" placeholder="Search" aria-describedby="basic-addon1">
                <ul class="list-unstyled" data-bind="foreach: filteredPeople">
                    <li>
                        <table class="table">
                            <tr>
                                <th>Name</th>
                                <th>Details</th>
                            </tr>
                            <tr>
                                <td><span data-bind="text: LastName"></span>, <span data-bind="text: FirstName"></span></td>
                                <td><a href="#" data-bind="click: $parent.getEmployeeDetail">Details</a></td>
                            </tr>
                        </table>
                    </li>
                </ul>
            </div>
        </div>
        <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
    </div>

    <!-- ko if:detail() -->
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">Detail</h2>
            </div>
            <table class="table table-hover" style="text-align: left">
                <tr><td>Name</td><td><span data-bind="text: detail().LastName"></span>, <span data-bind="text: detail().FirstName"></span></td></tr>
                <tr><td>Address</td><td data-bind="text: detail().StreetAddress"></td></tr>
                <tr><td>State</td><td data-bind="text: detail().State"></td></tr>
                <tr><td>Zip</td><td data-bind="text: detail().Zip"></td></tr>
                <tr><td>Age</td><td data-bind="text: detail().Age"></td></tr>
                <tr>
                    <td>Image</td>
                    <td>
                        <img data-bind="text: detail().Image" alt="Profile Picture" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /ko -->
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">Add Person</h2>
            </div>

            <div class="panel-body">
                <form class="form-horizontal" data-bind="submit: addEmployee" enctype="multipart/form-data">
                    <div class="form-group" data-bind="with: newEmployee">

                        <label for="inputFirstName" class="col-sm-2 control-label">First</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputFirstName" data-bind="value:FirstName" />
                        </div>

                        <label for="inputLastName" class="col-sm-2 control-label">Last</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputLastName" data-bind="value:LastName" />
                        </div>

                        <label for="inputAddress" class="col-sm-2 control-label">Address</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAddress" data-bind="value:StreetAddress" />
                        </div>

                        <label for="inputState" class="col-sm-2 control-label">State</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="inputState" data-bind="value:State">
                                <option value="AL">Alabama</option>
                                <option value="AK">Alaska</option>
                                <option value="AZ">Arizona</option>
                                <option value="AR">Arkansas</option>
                                <option value="CA">California</option>
                                <option value="CO">Colorado</option>
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="DC">District Of Columbia</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                                <option value="HI">Hawaii</option>
                                <option value="ID">Idaho</option>
                                <option value="IL">Illinois</option>
                                <option value="IN">Indiana</option>
                                <option value="IA">Iowa</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="ME">Maine</option>
                                <option value="MD">Maryland</option>
                                <option value="MA">Massachusetts</option>
                                <option value="MI">Michigan</option>
                                <option value="MN">Minnesota</option>
                                <option value="MS">Mississippi</option>
                                <option value="MO">Missouri</option>
                                <option value="MT">Montana</option>
                                <option value="NE">Nebraska</option>
                                <option value="NV">Nevada</option>
                                <option value="NH">New Hampshire</option>
                                <option value="NJ">New Jersey</option>
                                <option value="NM">New Mexico</option>
                                <option value="NY">New York</option>
                                <option value="NC">North Carolina</option>
                                <option value="ND">North Dakota</option>
                                <option value="OH">Ohio</option>
                                <option value="OK">Oklahoma</option>
                                <option value="OR">Oregon</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="RI">Rhode Island</option>
                                <option value="SC">South Carolina</option>
                                <option value="SD">South Dakota</option>
                                <option value="TN">Tennessee</option>
                                <option value="TX">Texas</option>
                                <option value="UT">Utah</option>
                                <option value="VT">Vermont</option>
                                <option value="VA">Virginia</option>
                                <option value="WA">Washington</option>
                                <option value="WV">West Virginia</option>
                                <option value="WI">Wisconsin</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </div>

                        <label for="inputZip" class="col-sm-2 control-label">Zip</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputZip" data-bind="value:Zip" />
                        </div>

                        <label for="inputImage" class="col-sm-2 control-label">Image</label>
                        <div class="col-sm-10">
                            <input type="file" class="form-control" id="inputImage" data-bind="value:Image" />
                        </div>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

​

谢谢。

Answer 1

因此，正如评论中提到的，认为您错过了self.filter。另外，如果您使用的是小型化的ko文件，您可能没有ko.utils.stringStartsWith。这是我查的名字。希望这是有帮助的

这是小提琴http://jsfiddle.net/bdellinger/LkqTU/32347/

这是javascript。

function employee(firstName, lastName, address, state, zip, age) {
  var self = this;
  this.firstName = ko.observable(firstName);
  this.lastName = ko.observable(lastName);
  this.address = ko.observable(address);
  this.state = ko.observable(state);
  this.zip = ko.observable(zip);
  this.age = ko.observable(age);
}

function model() {
  var self = this;
  this.employees = ko.observableArray('');
  this.filter = ko.observable('');

  this.filteredItems = ko.computed(function() {
    var filter = this.filter().toLowerCase();
    if (!filter) {
      return this.employees();
    } else {
      return ko.utils.arrayFilter(this.employees(), function(item) {
        if (
          item.firstName().toLowerCase().startsWith(filter) ||
          item.lastName().toLowerCase().startsWith(filter)
        ) {
          return item;
        }
      });
    }
  }, this);

}

String.prototype.startsWith = function(prefix) {
  return this.indexOf(prefix) === 0;
};

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
  mymodel.employees.push(new employee('John', 'Smith', '13 Pine Way', 'GA', '34876', '32'));
  mymodel.employees.push(new employee('Fred', 'Thebes', '6 Paine Hollow Dr', 'MA', '74846', '28'));
  mymodel.employees.push(new employee('Mary', 'Jones', '45 Way St', 'PA', '34986', '48'));
  mymodel.employees.push(new employee('Sue', 'Rodgers', '8 Mission Lane', 'TX', '14874', '55'));
});

这是html

<form class="form-inline">
  <div class="form-group">
    <label for="filter">Search By Name:</label>
    <input type="text" class="form-control" id="filter" data-bind="textInput: filter">
  </div>
</form>

<table class="table table-striped">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Address</th>
      <th>State</th>
      <th>Zip</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: filteredItems">
    <tr>
      <td>
        <label data-bind="text:firstName"></label>
      </td>
      <td>
        <label data-bind="text:lastName"></label>
      </td>
      <td>
        <label data-bind="text:address"></label>
      </td>
      <td>
        <label data-bind="text:state"></label>
      </td>
      <td>
        <label data-bind="text:zip"></label>
      </td>
      <td>
        <label data-bind="text:age"></label>
      </td>
    </tr>
  </tbody>
</table>

<div>