我正在尝试为我的项目制作一个简单的网格系统。但我无法正确更新我的viewmodel
这是我的JS;
$(function () {
function AppViewModel(initialData) {
var self = this;
self.prices = ko.observableArray(initialData.Data);
self.TotalCount = ko.observable(initialData.TotalCount);
self.Page = new PageViewModel(initialData);
self.GoTo = function (d) {
$.getJSON("/prices/GetByFilterViaJSON?limit=3&page=" + d, function (data) {
self.Page = new PageViewModel(data);
self.prices(data.Data);
});
};
};
function PageViewModel(listData) {
var self = this;
ko.mapping.fromJS(listData.Page, {}, self);
}
$.getJSON("/prices/GetByFilterViaJSON?limit=3", function (data) {
ko.applyBindings(new AppViewModel(data));
});
});
和HTML
<div class="section table_section">
<div class="section_inner">
<div class="title_wrapper">
<h2 data-bind="text: TotalCount">
Prices</h2>
</div>
<div class="section_content">
<div id="product_list">
<div class="table_wrapper">
<div class="table_wrapper_inner">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<th>
No.
</th>
<th>
Tier
</th>
<th>
</th>
</tr>
<!-- ko foreach: prices -->
<tr data-bind="css:{first: $index % 2 == 0}">
<td data-bind="text: Id" style="width: 26px;">
</td>
<td data-bind="text: Tier" style="width: 35px;">
</td>
<td style="width: 120px;">
<div class="actions_menu">
<ul>
<li><a class="edit" href="">edit</a></li>
<li><a class="delete" href="">deny</a></li>
</ul>
</div>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
</div>
</div><!-- PAGING NUMBERS -->
<div class="pagination"><!-- HERE NOT UPDATING -->
<span class="page_no" data-bind="text: Page.CurrentPage()"></span>
<ul class="pag_list" data-bind="foreach: ko.utils.range(1, Page.TotalPage)"> <!-- AND HERE NOT UPDATING -->
<li><a href="" data-bind="click: $root.GoTo, css:{current_page: $data==$root.Page.CurrentPage()}"><span><span data-bind="text: $data"></span></span></a>
</li>
</ul>
</div>
</div>
</div>
当我点击分页号码(viewModel中的GoTo函数)时,self.Page不会更新,因此页码类始终相同。这就是我无法成功的。
你认为我做错了什么?
答案 0 :(得分:3)
当您使用GoTo
方法执行此操作时,Knockout不知道您的新PageViewModel:
self.Page = new PageViewModel(data);
UI与先前的PageViewModel绑定,并且不知道这个新的。您可能希望使self.Page
成为可观察对象,并使用当前的PageViewModel填充它。那么,那么你的GoTo
方法就可以了:
self.Page(new PageViewModel(data))`.
您最初会将其定义为:
self.Page = ko.observable(new PageViewModel(initialData));
在您的用户界面中,您需要在部分周围with: Page
或访问Page().CurrentPage
等值。