使用Knockout和复选框进行ajax调用的问题

Issue using Knockout and checkboxes to make ajax calls

本文关键字:ajax 调用 问题 Knockout 复选框 使用      更新时间:2024-02-06

我正在开发一个界面,它是一个搜索器,所以它有过滤器,但这个过滤器是在用户选择的每个元素中使用名为Filter的ajax调用创建的。我使用knockout来用默认搜索填充值,但出于某种原因,服务器会提供一个数组,类似于rating: [5,4,3,2]和其他具有不同设计的数组,如categories:[{id:2, name:"PC components", count: 50}]。问题1:当我点击从评级数组填充到页面中的一个元素时,使用:

    <!-- ko foreach: rating -->
                <label>
                    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedRatings, click: $root.Filter " />
                    <span data-bind="text: $data + ' Stars'"></span>
                </label>
                <!-- /ko -->
it make the call but the checkbox is not checked, this is checked when i check some other. I try a many kind of things but nothing solve the problem.
Issue 2: When I check some of the checkboxes, the make the ajax call, but they show as checked when the action finish, no in the first selection. Why is that.
Here is my code:
    //observable
    function Searcher(){
    self = this;
            self.types = ko.observableArray();
            self.selectedTypes = ko.observableArray();
            self.rating = ko.observableArray();
            self.selectedRatings = ko.observableArray([]);

        //Rating
        self.noneRating = ko.observable(true);
        this.selectedRatings.subscribe(function (newValue) {
            self.noneRating(newValue && newValue.length == 0 ? true : false);
        }, self);
        self.noneRating.subscribe(function (newValue) {
            if (newValue) {
                self.selectedRatings.removeAll();
                self.Filter();
            }
        });
        //Styles
        self.noneStyle = ko.observable(true);
        this.selectedStyles.subscribe(function (newValue) {
            self.noneStyle(newValue && newValue.length == 0 ? true : false);
        }, self);
        self.noneStyle.subscribe(function (newValue) {
            if (newValue) {
                self.selectedStyles.removeAll();
                self.Filter();
            }
        });
     self.getSearchFilters = function () {
                debugger;
                var json = ko.toJSON({ type: self.selectedTypes(), rating: self.selectedRatings()});
                return json;
            };
     self.Filter = function () {
                self.filterbuttonActive(false);
                $.ajax({
                    type: "POST",
                    url: "url/Find",
                    data: "{ 'search':'" + + "', 'filter': '" + self.getFilters() + "' }",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    beforeSend: function () {
                        //something here
                    },
                    success: function (result) {
                       //something here to load data
                    },
                    error: function (a, desc, error) {
                       // some error
                    },
                });
            };
    }
        //call ViewModel on document.ready
        $(function () {
            var searcher= new Searcher();
            searcher.Search();
            ko.applyBindings(searcher);
        });
//the page
    <div class="input-wrap">
                    <label for="type_short">
                        <b>Type:</b>
                    </label>
 <label>
                    <input type="checkbox" data-bind="checked: noneType" />
                    <span>Any</span>
                </label>
                    <!-- ko foreach: types -->
                    <label>
                        <input type="checkbox" data-bind="checkedValue: $data.id, checked: $root.selectedTypes, click: $root.Filter " />
                        <span data-bind="text: $data.name"></span>
                        <strong class="filter_result_count" data-bind="text: $data.count"></strong>
                    </label>
                    <!-- /ko -->
                </div>
                <div class="input-wrap">
                    <label for="rating">
                        <b>Rating:</b>
                    </label>
                <label>
                    <input type="checkbox" data-bind="checked: noneRating" />
                    <span>Any</span>
                </label>
                    <!-- ko foreach: rating -->
                    <label>
                        <input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedRatings, click: $root.Filter " />
                        <span data-bind="text: $data + ' Stars'"></span>
                    </label>
                    <!-- /ko -->
                </div>

我们会很感激你的帮助。

尝试删除

click: $root.Filter

绑定。相反,只要selectedRatings通过包含而发生变化,就调用self.Filter

self.selectedRatings.subscribe(Filter);

在CCD_ 5视图模型的末尾。