0

我按照 MVC4 SPA 演练示例创建了一个简单的应用程序，在其中我下拉了 10 个主题的列表，让用户将它们标记为安全或不良，然后保存更改。现在，当用户保存更改时，我想重新加载包含接下来要处理的 10 个主题的列表。我该怎么做？

这是我的视图数据模型：

function TopicsViewModel() {
    // Data
    var self = this;
    self.dataSource = upshot.dataSources.UnsafeTopics.refresh();
    self.topics = self.dataSource.getEntities();

    // Operations
    self.saveAll = function () {
        self.dataSource.commitChanges();
    }
    self.revertAll = function () {
        self.dataSource.revertChanges();
    }
}

看法：

@(Html.UpshotContext(bufferChanges: true).DataSource<TopicDataController>(x => x.GetUnsafeTopics()))

<button id="saveAll" data-bind="click: saveAll">Commit changes</button>


<ul data-bind="foreach: topics">
    <li data-bind="css: { updated: IsUpdated }">
        <strong class="topicItem" data-bind="text: TopicName"></strong> 
        <label><input class="bad" type="checkbox" data-bind="checked: IsBad" /> is bad</label>
        <label><input class="safe" type="checkbox" data-bind="checked: IsSafe"/> is safe</label>
    </li>
</ul>

<script src="~/Scripts/App/TopicsViewModel.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        ko.applyBindings(new TopicsViewModel());
    });

</script>

控制器：

public class TopicDataController : DbDataController<SocialViewEntities>
    {
        public IQueryable<Topic> GetUnsafeTopics()
        {
            return DbContext.Topics.Where<Topic>(t => t.IsBad == false).Where<Topic>(t => t.IsSafe == false).Take<Topic>(10);
        }

        public void UpdateTopic(Topic topic) { UpdateEntity(topic); }

    }
4

1 回答 1

3

基本上你想要做的是分页。坏消息是，显然最新版本的 Upshot (1.0.0.2) 没有名为 PagingModel 的对象，BigShelf示例使用该对象进行分页。

好消息是您可以尝试下载该示例并提取位于upshot.knockout.extensions.js文件中的 PagingModel 代码（包含在上述下载中），看看它是否适用于最新版本的 upshot (1.0.0.2 ）。我会自己尝试这样做，并为您提供任何结果。

更新： 我一直在深入挖掘，发现 PagingModel 对象确实适用于 1.0.0.2 并且在您的情况下使用它可能是一个好主意，因为它可以简化一切（为您提供可以绑定到的功能下一页，转到最后一页等）

但是 PagingModel 并不是真正需要的，因为您需要进行分页（跳过和获取功能）的所有内容都已经在 dataSource 对象中。这是一个示例，说明如何在没有 PagingModel 的情况下执行此操作。

首先，添加一个 currentPage 可观察对象：

self.currentPage = ko.observable();

其次，初始化时不要刷新你的数据源，而是设置分页参数，使你的DB中的不是每个主题都被获取，然后刷新数据源。每当 currentPage 属性更改时都会执行此操作：

self.currentPage.subscribe( function() {
  this.dataSource.setPaging({ 
    skip: (this.currentPage() - 1) * 10,
    take: 10, includeTotalCount: true });
    this.dataSource.refresh();
}).bind(self);

// Trigger the refresh
self.currentPage(1);

然后，将 viewModel 的 saveAll 函数更改为以下内容，以触发刷新到下一页。

// Operations
self.saveAll = function () {
    self.dataSource.commitChanges();
    self.currentPage(self.currentPage() + 1);
}

请记住：从 dataSource 初始化行中删除 refresh() ！

希望能帮助到你！

于 2012-04-07T02:09:56.643 回答