javascript - knockout 数据绑定(bind)使表结果消失

Question

我目前有一个工作示例，从 JSON 响应中提取数据并填充表，但是，当我将复选框添加到结果表时，曾经填充表的所有数据都丢失了。例如，当我在名字字段中搜索字母“T”时，它会使用名字中包含字母 T 的所有结果填充表。但是，一旦我添加曾经填充的所有数据就不再出现。当我删除数据绑定(bind)部分时，它工作正常，所有数据都会填充，并且会出现一个复选框，并且可以很好地选中和取消选中。我相信问题是因为我有一个 foreach 正在运行，它正在 json 响应中搜索数据，但因为它找不到任何数据，所以失败了。那么，如果这是问题所在，我该如何从 foreach 中排除已检查的数据绑定(bind)。

  <tbody data-bind="foreach: policies">
            <tr>
                <td><input type="checkbox" data-bind="checked: queued" /></td>
                <td data-bind="text: policy_number"></td>
                <td data-bind="text: policy_type"></td>
                <td data-bind="text: contact.first"></td>
                <td data-bind="text: contact.last"></td>
                <td data-bind="text: contact.street"></td>
                <td data-bind="text: contact.city"></td>
                <td data-bind="text: contact.state"></td>
                <td data-bind="text: contact.zipcode"></td>
                <td data-bind="text: contact.phonenumber"></td>
            </tr>
        </tbody>
    </table>
    <a data-bind="visible: queued" class="btn btn-lg btn-primary btn-block">Generate</a>
     <!--class="clickable" data-bind="click: generate"-->
    <script type="text/javascript">
    /* global ko, $ */
    function Policy(data) {
        var self = this;
        Object.keys(data).forEach(function(prop) {
            self[prop] = data[prop];
        });

        self.generate = function() {
            window.open("{{ url_for('genreport') }}/" + qvm.letter() + '/' + self.id);
        }

    }


    function QueryViewModel(){
        var self = this;

        self.first = ko.observable('');
        self.last = ko.observable('');
        self.phone = ko.observable('');

        self.letter = ko.observable();

        self.letters = {{ letters|safe }};

        self.policies = ko.observableArray();
        self.queued = ko.observable(false);

        self.clear = function() {
            self.policies.removeAll();
            self.first('');
            self.last('');
            self.phone('');
        }

        self.search = function() {
            // postJson here
            var queryObj = {
                first: self.first(),
                last: self.last(),
                phone: self.phone()
            }

            $.postJSON("{{ url_for('report_search') }}", queryObj, function(result) {
                // first empty our policy table
                self.policies([]);

                // add results
                result.policies.forEach(function(p) {
                    self.policies.push(new Policy(p));
                });
            });
        }    

    }

    var qvm = new QueryViewModel()

    ko.applyBindings(qvm);
    </script>

Answer 1

正如 Tomalak 所说，我必须将检查指向父级，因为它正在寻找要在 JSON 响应中定义的队列。添加 $parent.前面的排队解决了这个问题。