使用Knockout和复选框进行ajax调用的问题
Issue using Knockout and checkboxes to make ajax calls
我正在开发一个界面,它是一个搜索器,所以它有过滤器,但这个过滤器是在用户选择的每个元素中使用名为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视图模型的末尾。
相关文章:
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Javascript/jQuery中的并行Ajax调用
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- node.js请求数据事件未在CORS ajax调用中触发
- 如何从ajax调用返回.wrap()元素
- Ajax调用在Firefox中不会自动响应
- AJAX调用中的非法调用
- 使用AJAX调用将GeoJSON数据拉入传单
- 在MVC 4中,对Controller的Ajax调用为空
- Jquery:对返回JSON数据的php脚本的Ajax调用
- 在ajax调用中阻止来自JS对象的函数
- 如何在MVC5中ajax调用的部分视图中引用外部javascript
- 页面加载后的Ajax调用
- 如何使用Ajax调用特定的控制器和操作来重定向用户
- curl和fileget_contents在ajax调用后不起作用
- 在任何AJAX调用之前触发一个javascript函数
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- Ajax调用ERror Cross Origin REquest:在rails中自动完成大学列表
- ASP.NET MVC 3-在ajax调用后,重定向到新页面或生成页面刷新
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作