对象HTMLInputElement而不是淘汰赛js textInput绑定中的值答案

【问题标题】：object HTMLInputElement instead of value in knockout js textInput binding对象HTMLInputElement而不是淘汰赛js textInput绑定中的值
【发布时间】：2016-03-30 11:14:29
【问题描述】：

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

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

【问题讨论】：

我们需要在现场查看更多您的代码，最好是使用 Stack Snippets（<> 工具栏按钮）的minimal reproducible example。至少，我们需要了解您如何创建您的视图模型以及您对 ko.applyBindings 的调用，该调用将该模型绑定到 DOM。
@T.J.Crowder 我分享了更多来自 JS 文件的代码。淘汰码。
我在您的视图模型代码中的任何地方都看不到nameMusicCompany。这就是 Knockout 使用自动全局的原因。

标签： jquery knockout.js

【解决方案1】：

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

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

【讨论】：

我对 KnockoutJS 还很陌生，这个问题出现在我身上，因为我将输入元素 id 命名为与我的视图模型属性相同。

【解决方案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 -->

【讨论】：