我想在加载时使用数据库中的现有数据预先填充表单的字段。在页面加载时,我正在进行 ajax 调用,该调用查询数据并将返回的数据分配给 knockout 可观察数组。
客户端.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 调用后可观察到的示例数据:
foundCustomers {"id":"1","nameMusicCompany":"Company","natureMusicCompany":"Music"}
在 View 中,我尝试使用 textInput 绑定(bind)来分配值,如下所示:
<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]。
Controller :
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;
}
最佳答案
发生的情况是,Knockout 正在获取浏览器创建的预定义 nameMusicCompany
global,因为您为 input
元素提供了 id
而不是 View 模型的 nameMusicCompany
属性。
您没有向我们展示足够的代码,让我们无法告诉您如何修复它,但这就是正在发生的事情。它可能很简单,您的属性应该是 data-bind="foundCustomers.nameMusicCompany"
,但这是一个猜测,没有看到更多代码。
关于jquery - 对象 HTMLInputElement 而不是 knockout js textInput 绑定(bind)中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36307146/