Question

我正在开发一个界面女巫是一个搜索者，因此它有过滤器，但是这个过滤器是在用户选择的每个元素中使用名为Filter的ajax调用制作的。我使用knockout使用默认搜索来填充值，但出于某种原因，服务器出现了一个数组kike 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>

一些帮助会有所帮助，谢谢。

Answer 1

尝试删除

click: $root.Filter

结合。相反，只要self.Filter通过包含

进行更改，就可以致电selectedRatings

self.selectedRatings.subscribe(Filter);

在Searcher视图模型的末尾。

使用Knockout和复选框发出ajax调用问题

1 个答案: