オブジェクトknockoutの値ではなくHTMLInputElement js textInputバインド

Question

私は、フォームのフィールドをデータベースからの既存のデータで事前に読み込みたいと思います。私は、データを照会し、返されたデータをノックアウト可観測配列に代入するajax呼び出しを作成しています。

client.js：

function clientModel() 
    { 
     var self = this; 
     this.lastTenClients = ko.observableArray(); 
     this.pendingClients = ko.observableArray(); 
     this.foundCustomerResult = ko.observable(); 
     this.shouldShowCustomerMessage = ko.observable(false); 
     this.foundCustomers = ko.observableArray(); 

     var base_url = window.location.origin; 
     var pathArray = window.location.pathname.split('/'); 
     if(base_url === "http://localhost"){ 
      var url = base_url+"/"+pathArray[1]+"/client/"; 
     } else { 
      var url = base_url+"/client/"; 
     } 

     $.ajax({ 
      url: url+"get_last_ten_clients", 
      type: "get", 
      cache: false, 
      success: function(client_list) { 
       var data = $.parseJSON(client_list); 
       self.lastTenClients(data); 
      } 
     }); 

     $.ajax({ 
      url: url+"get_pending_data_clients", 
      type: "get", 
      cache: false, 
      success: function(client_list) { 
       var data = $.parseJSON(client_list); 
       self.pendingClients(data); 
      } 
     }); 

     this.search_client = function() 
     {   
      self.shouldShowCustomerMessage(false); 
      self.foundCustomers.removeAll(); 
      crsf = $("input[name=csrf_test_name]").val(); 
      dataString = $("#search_client_input").val(); 
      $.ajax({ 
       url: url+"search_client_database", 
       type: "post", 
       cache: false, 
       data: {csrf_test_name: crsf, search_client_input: dataString}, 
       success: function(customer_details) { 
         var data = (customer_details); 
         self.foundCustomers(data); 
       }, 
       error: function(xhr, ajaxOptions, thrownError) 
       { 
        alert(xhr.status); 
        alert(thrownError); 
       } 
      }); 
     } 
    } 

    ko.applyBindings(new clientModel()); 

観測可能で、サンプルデータAJAX呼び出し後：私は次のような結合にtextInputを使用して値を代入しようとしていますビューで

foundCustomers {"id":"1","nameMusicCompany":"Company","natureMusicCompany":"Music"} 

：

<input type="text" class="form-control input-sm" name="nameMusicCompany" id="nameMusicCompany" placeholder="Name of the Music Company" 
         data-bind="textInput: nameMusicCompany"> 

"company"という値を表示する代わりに、[object HTMLInputElement]をinp内に表示しますutボックス。

コントローラー：

public function search_client_database() 
{ 
    if(!empty($this->input->post('search_client_input'))) 
       { 
        $result = $this->client_model->get_client_data($this->input->post('search_client_input')); 
         echo json_encode($result); 
       } 

} 

モデル：

public function get_client_data($client_name) 
     { 
       $client_name = strtoupper($client_name); 
       $sql = "SELECT * FROM client_data where UPPER(nameMusicCompany) = ?"; 
       $query = $this->db->query($sql, array($client_name)); 

       if($query->num_rows() > 0) 
       { 
         return $query->row(); 
       } 

       return false; 
     } 

Answer 1

何が起こっていることはノックアウトは、あなたがidの代わりに、あなたのinput要素を与えたので、ブラウザによって作成された定義済みのnameMusicCompanyグローバルを拾っているということですあなたのビューモデルのnameMusicCompanyプロパティ

私たちはそれを修正するためにどのように伝えるためにのためにあなたは十分にあなたのコードの私たちに示していないが、それは何が起こっているのです。あなたの属性がdata-bind="foundCustomers.nameMusicCompany"でなければならないほどシンプルであるかもしれませんが、それはあなたのコードをもっと見ることなく推測です。

Answer 2

あなたのAjax成功コールバックでは、どちらも観測可能な配列であるlastTenClientsとpendingClientsを設定しています。

あなたが観測配列内のすべてのアイテムをレンダリングする場合は、foreachデータバインドを使用する必要があります：あなたは、いくつかの入力をレンダリングするために意味場合

。 foreach内のHTMLマークアップには、静的なidプロパティを含めることはできません。それはテンプレートとして使用され、何度も含めることができます。いくつかのHTML要素に同じIDを再利用すると、トラブルにあなたを取得します。

例として、試してください：あなたは

を返された項目の一つだけのための入力をレンダリングするために意味場合

<input>要素に指定した場合あなたのページに一度しか表示されない場合は、それをレンダリングしなければならない顧客のnameMusicCompanyプロパティを教えてください。プロパティは、現在のバインディングのコンテキスト内に存在しない場合は、それがどこか他にそれを見て、最終的にはwindowになってしまいます。 （私が間違っていないなら、ノックアウトはwith: $dataを内部的に使っているからです）。あなたは、プロパティの名前と同じで、あなたの<input>のIDを命名しましたので、窓はHTMLInputElementが含まれています。

例として、試してみてください。

<!-- ko with: foundCustomers()[0] --> 
<input 
    type="text" name="nameMusicCompany" id="nameMusicCompany" 
    data-bind="textInput: nameMusicCompany"> 
<!-- /ko -->