当使用映射时,属性绑定被破坏
Knockout.js attr binding broken when use mapping
我试图通过映射插件更新ViewModel与WebApi控制器发送的数据点击。第一次加载时一切正常,但当数据更新时,绑定被破坏。我试过把attr binding改成text binding它工作正常,所以我想问题出在attr binding上。这里是JS:
<script>
function viewModel() {
var self = this;
self.currentPage = ko.observable();
self.pageSize = ko.observable(10);
self.currentPageIndex = ko.observable(0);
self.jobs = ko.observableArray();
self.currentPage = ko.computed(function () {
var pagesize = parseInt(self.pageSize(), 10),
startIndex = pagesize * self.currentPageIndex(),
endIndex = startIndex + pagesize;
return self.jobs.slice(startIndex, endIndex);
});
self.nextPage = function () {
if (((self.currentPageIndex() + 1) * self.pageSize()) < self.jobs().length) {
self.currentPageIndex(self.currentPageIndex() + 1);
}
else {
self.currentPageIndex(0);
}
}
self.previousPage = function () {
if (self.currentPageIndex() > 0) {
self.currentPageIndex(self.currentPageIndex() - 1);
}
else {
self.currentPageIndex((Math.ceil(self.jobs().length / self.pageSize())) - 1);
}
}
self.sortType = "ascending";
self.sortTable = function (viewModel, e) {
var orderProp = $(e.target).attr("data-column")
self.jobs.sort(function (left, right) {
leftVal = left[orderProp];
rightVal = right[orderProp];
if (self.sortType == "ascending") {
return leftVal < rightVal ? 1 : -1;
}
else {
return leftVal > rightVal ? 1 : -1;
}
});
self.sortType = (self.sortType == "ascending") ? "descending" : "ascending";
}
// Here is function that must update ViewModel
self.getDays = function (days) {
var uri = "/api/job?days=" + days;
$.getJSON(uri, function (data) {
ko.mapping.fromJS(data.$values, {}, self.jobs);
})
.error(function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
});
}
$.getJSON("/api/job", function (data) {
self.jobs(data.$values);
});
}
$(document).ready(function () {
ko.applyBindings(new viewModel());
});
</script>
这是我调用update的方式。
<div class="btn-group">
<button type="button" class="btn btn-default" id="7" value="7" data-bind="click: getDays.bind($data, '7')">7 дней</button>
<button type="button" class="btn btn-default" id="10" value="10" data-bind="click: getDays.bind($data, '10')">10 дней</button>
<button type="button" class="btn btn-default" id="14" value="14" data-bind="click: getDays.bind($data, '14')">14 дней</button>
<button type="button" class="btn btn-default" id="30" value="30" data-bind="click: getDays.bind($data, '30')">30 дней</button>
<button type="button" class="btn btn-default" id="60" value="60" data-bind="click: getDays.bind($data, '60')">60 дней</button>
<button type="button" class="btn btn-default" id="180" value="180" data-bind="click: getDays.bind($data, '180')">180 дней</button>
</div>
这是显示数据的表格。
<table id="arrival" class="table table-condensed table-striped">
<thead>
<tr data-bind="click: sortTable">
<th></th>
<th data-column="excursion">Название</th>
<th data-column="excursiondate">Дата</th>
</tr>
</thead>
<tbody data-bind="foreach: currentPage">
<tr>
<td><a data-bind="attr: { href: '/list/' + $data.kodg }" target="_parent">Список туристов</a></td>
<%--<td data-bind="text: $data.kodg""></td>--%>
<td data-bind="text: $data.excursion"></td>
<td data-bind="text: $data.excursiondate"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="pager">
<button data-bind="click: previousPage" class="btn previous"><i class="glyphicon glyphicon-backward"></i></button>
Страница
<label data-bind="text: currentPageIndex() + 1" class="badge"></label>
<button data-bind="click: nextPage" class="btn next"><i class="glyphicon glyphicon-forward"></i></button>
</td>
</tr>
</tfoot>
</table>
任何想法?
Knockout mapping导致所有属性都转换为可观察对象。在你的attr绑定中,kodg
属性是一个函数。可观察对象实例),你应该做如下修改:
attr: { href: '/list/' + ko.utils.unwrapObservable($data.kodg) }
或
attr: { href: '/list/' + $data.kodg() }
试试这个
<a
data-bind="
attr: { href: $parent.Link($data.kodg) }"
target="_parent">
Список туристов
</a>
在你的viewmodel
self.Link = function(data){
return '/list/' + data
// Or if you have observable return '/list/' + data()
}
相关文章:
- Ember.js/HHandlebars:使用{{view}}助手渲染的视图不绑定属性
- 聚合物 - 在重复模板中获取数据绑定属性值
- 如果指令包含在另一个指令中,我如何在隔离范围内添加双向数据绑定属性
- AngularJS1.2 Directive双向绑定属性未反映到View
- 为什么AngularJS在页面加载时没有自动绑定属性?包括一个非常简单的例子
- 如何在AngularJS指令中绑定属性
- 更改铁列表中现有项的绑定属性的值
- 如何使用 angularjs 中的表达式绑定属性名称
- Angular 指令内部 HTML 重新编译,动态创建绑定属性
- 标识事件中的绑定属性
- AngularJS 指令未正确绑定属性
- 在显示绑定属性之前在 JavaScript 中格式化绑定属性
- 从数据绑定属性迭代键值对
- 剑道绑定属性与字符串和变量
- 如何在一个元素上具有多个数据绑定属性
- 无法识别余烬组件 - 绑定属性渗入控制器
- 挖空添加我自己的数据绑定属性,如 With
- Emberjs如何绑定属性和id
- Ember绑定属性没有更新,尽管控制器属性更新得很好
- 如何在Knockout中选择性地绑定属性