Question

我按照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); }

    }

Answer 1

基本上你要做的就是分页。坏消息是显然最新版本的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 observable：

self.currentPage = ko.observable();

其次，初始化时不要刷新数据源，而是设置分页参数，以便不获取数据库中的每个主题，然后刷新dataSource 。只要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（）！

希望它有所帮助！

在对upshot数据源进行更改后刷新淘汰模型

1 个答案: