refreshing knockout model after committing changes to upshot datasource

I followed the MVC4 SPA walkthrough example and created a simple application where I pull down a list of 10 topics, let users mark them as safe or bad, and then save changes. Now, when users save changes, I would like to reload the list with next 10 topics to process. How would I do this?

Here's my view data model:

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();
    }
}

View:

@(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>

Controller:

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); }

    }

Basically what you are trying to do is paging. The bad news is that apparently the latest version of Upshot (1.0.0.2) doesn't have an object called PagingModel which is what's used by the BigShelf example to do paging.

The good news is that you could try downloading that example and extracting the PagingModel code located in the upshot.knockout.extensions.js file (included in the download pointed above) and see if it works with the latest version of upshot (1.0.0.2). I'll try doing that myself and update you with any results.

---

Update: I've been digging a little deeper and found out that the PagingModel object does work with 1.0.0.2 and it's probably a good idea to use it in your situation as it simplifies everything (provides you with function you can bind to advance to the next page, go to the last one, among other things)

But PagingModel is not really required because everything you need to do paging (skip and take functionality) is already in the dataSource object. Here's an example of how you can do it without the PagingModel.

First, add a currentPage observable:

self.currentPage = ko.observable();

Second, don't refresh your data source when initialized, instead set the paging parameters so that not every topic in your DB is fetched, and then refresh the dataSource. This is done whenever the currentPage property changes:

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);

Then, change the saveAll function of your viewModel to the following to trigger a refresh to the next page.

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

Remember: remove the refresh() from the dataSource initialization line!

Hope it helps!