object HTMLInputElement nakavt içinde değer yerine js textInput ciltleme

Question

Veritabanındaki varolan verilerle yük altındaki form alanlarını doldurmak istiyorum. Yüklendiğinde, verileri sorgulayan ve döndürülen verileri bir göz atılabilir gözlemlenebilir diziye atayan bir ajax çağrısı yapıyorum.

client.js: ajax çağrısından sonra gözlemlenebilir içinde

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()); 

Örnek veri:

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

i aşağıdaki gibi bağlayıcı textInput kullanarak değeri atamak çalışıyorum görünümünde

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

Ancak "şirket" değerini göstermek yerine, inp içinde [object HTMLInputElement] öğesini görüntüler ut kutusu.

Denetleyici:

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); 
       } 

} 

Modeli:

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

Ne oluyor Nakavt bir id yerine sizin input elemanı verdiği için tarayıcı tarafından oluşturulan önceden tanımlanmış nameMusicCompanyküresel toplayıp olmasıdır Görüntü modelinizin nameMusicCompanyözelliği.

Bize nasıl düzeltileceğini anlatabilmemiz için yeterince kodunuzu göstermediniz, ancak bu devam ediyor. Bu özniteliğin data-bind="foundCustomers.nameMusicCompany" olması gerektiği kadar basit olabilir, ancak kodunuzun daha fazlasını görmeden bir tahmin.

Answer 2

ajax başarı geri aramalarınızda, her ikisi de gözlenebilir diziler olan lastTenClients ve pendingClients ayarlıyorsunuz. Eğer bir foreach veri bağlama kullanmak gerekecektir gözlemlenebilir bir dizinin içindeki tüm öğeleri işlemek istiyorsanız

:

birkaç girdileri işlemek için bahsediyorsan

. foreach'un içindeki HTML işaretlemesi statik id özelliğine sahip olamaz; bir şablon olarak kullanılır ve birçok kez dahil edilebilir. Aynı kimliği birkaç HTML öğesinde yeniden kullanmak, sizi belaya sokar.

Örnek olarak, deneyin: Eğer

döndürülen öğeler yalnızca biri için bir giriş işlemek için kastediyorsan

<input> eleman belirttiğiniz takdirde Sadece sayfanızda bir kez görünür, hangi müşterinin işlemesi gereken nameMusicCompany özelliğine sahip olduğunu söylemeniz gerekir. Özellik mevcut bağlama bağlamında mevcut değilse, başka bir yere bakacak ve en sonunda window içinde sona erecektir. (Yanılmıyorsam, bunun nedeni nakavtun dahili olarak with: $data'u kullanmasıdır). <input>'unuzun kimliğini mülkün adıyla aynı şekilde adlandırdığınız için, pencere bir HTMLInputElement içerir.

Örnek olarak, deneyin:

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