ノックアウト可観測配列をフィルタリングするときにデータがありません

Question

観測可能な配列を扱うために検索ボックスを取得しようとしています。私は、ユーザーにテキストを入力させ、表示された値を名または姓のいずれかに一致させたいと思っています。

下記のHTMLとJavaScript。

計算された関数を使用しようとするたびに、何も表示されません。私が従業員の配列を使用している場合、私は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')); 
}); 

はあなたのビューモデルにあなたが `self.filter`を定義した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>