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) には、ページングを行うためにBigShelfの例で使用されている PagingModel というオブジェクトがないことです。

幸いなことに、その例をダウンロードして、 upshot.knockout.extensions.jsファイル (上記のダウンロードに含まれています)にある PagingModel コードを抽出して、最新バージョンの upshot (1.0.0.2) で動作するかどうかを確認してください。 ）。私はそれを自分で試して、結果を更新します。

更新: 私はもう少し深く掘り下げていて、PagingModel オブジェクトが 1.0.0.2 で動作することがわかりました。すべてを簡素化するため、状況に合わせて使用​​することをお勧めします (バインドして先に進むことができる関数を提供します)。次のページ、最後のページに移動するなど)

ただし、ページング (スキップして機能を取得する) に必要なものはすべて dataSource オブジェクトに既に含まれているため、PagingModel は実際には必要ありません。PagingModel を使用せずに実行する方法の例を次に示します。

まず、currentPage オブザーバブルを追加します。

self.currentPage = ko.observable();

次に、初期化時にデータ ソースを更新しないでください。代わりに、DB 内のすべてのトピックがフェッチされないようにページング パラメーターを設定してから、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() を削除してください!

それが役に立てば幸い！

于 2012-04-07T02:09:56.643 に答える