jquery - 对象 HTMLInputElement 而不是 knockout js textInput 绑定(bind)中的值

Question

我想在加载时使用数据库中的现有数据预先填充表单的字段。在页面加载时，我正在进行 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;
        }

Answer 1

发生的情况是，Knockout 正在获取浏览器创建的预定义 nameMusicCompany global，因为您为 input 元素提供了 id 而不是 View 模型的 nameMusicCompany 属性。

您没有向我们展示足够的代码，让我们无法告诉您如何修复它，但这就是正在发生的事情。它可能很简单，您的属性应该是 data-bind="foundCustomers.nameMusicCompany"，但这是一个猜测，没有看到更多代码。