Question

我想在加载时使用数据库中的现有数据预填充表单的字段。在页面加载时，我正在进行ajax调用，该调用查询数据并将返回的数据分配给knockout可观察数组。

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调用后可观察的示例数据：

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

在视图中，我尝试使用textInput绑定分配值，如下所示：

<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]。

控制器：

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 全局，因为您为input元素提供了id而不是nameMusicCompany您的viewmodel的{1}} 属性。

您还没有向我们展示足够的代码，告诉您如何修复它，但这就是正在发生的事情。它可能就像您的属性应该是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 -->

对象HTMLInputElement而不是knockout js中的值textInput绑定

2 个答案: