過濾可觀察數組時，沒有數據存在

我試圖讓一個搜索框與可觀察數組一起工作。我希望讓用戶輸入文字，並使顯示的值與名字或姓氏相匹配。過濾可觀察數組時，沒有數據存在

下面的HTML和JavaScript。

每次我嘗試使用計算函數時，我什麼都不顯示。如果我只是使用員工數組，我會得到數據庫中的數據。我相信這是一件小事，但我不知所措。

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>

謝謝。

來源

2016-11-08 LJ Johnson

？ – gkb

所以它看起來像你正在使用http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html作爲你的過濾器的例子。然而，在那個例子中他注意到「例如，假設我們將一個文本框綁定到一個可觀察的過濾器上，並用它來獲取我們過濾的項目：」Donelly先生提到你錯過了那部分。下面還要小心說。注意：ko.utils.stringStartsWith不會在縮小的KO文件中導出。代碼很簡單，但要複製。 –

所以在評論中提到，認爲你錯過了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>

凡在你的視圖模型你定義`self.filter`

來源

2016-11-08 12:37:28

添加self.filter並在textInput和valueUpdate之間放置逗號使其按預期方式顯示。仍然沒有過濾，但我相信我可以從這裏得到它。謝謝！ –

過濾可觀察數組時，沒有數據存在

回答

相關問題