Question

2我有一个Ember应用程序，它连接到api，从那里获得文章。我利用分页来获得每篇请求10篇文章。这有效。但现在我想为请求添加排序。我通过使用store.find。

中的extra参数实现了这一点

但是，出于某种原因，如果我使用＆＃39;返回this.store.find（＆＃39;文章＆＃39;，params）;＆＃39;而不是＆＃39;返回this.store.find（＆＃39; article＆＃39;）;＆＃39; getMore函数中的新文章（仍然请求并正确添加到商店！）不会显示或呈现。但是当我从模型中的store.find中删除params参数时，它确实有效。这可能是什么情况？

模板/ articles.hbs

<script type="text/x-handlebars" data-template-name="articles">

      {{#each itemController="article"}}

          <div class="item">
              //...
          </div>
      {{/each}}

    </script>

路由/ articles.js

import Ember from 'ember';

export default Ember.Route.extend(Ember.UserApp.ProtectedRouteMixin, {
  model: function(params) {

    var params2 = {page: 1, per_page: 10, sort: params.sort};
    return this.store.find('article', params2);
  },
  setupController: function(controller, model) {
    controller.set('content', model);
  },
  actions:{
    //...
    },

    getMore: function() {
      // don't load new data if we already are
      //if (this.get('loadingMore')) return;

      //this.set('loadingMore', true);
      var meta = this.store.metadataFor("article");
      if (meta.hasmore) {

        var controller = this.get('controller'),
          nextPage = controller.get('page') + 1,
          perPage = controller.get('perPage'),
          sorting = controller.get('sort'),
          items;

        var params = {page: nextPage, per_page: perPage, sort: sorting};

        this.store.findQuery('article', params).then(function (articles) {
          controller.set('page', controller.get('page') + 1);
          //this.set('loadingMore', false);
        });
      }
      else{
        $('#pagination_spinner').hide();
      }
    },
    queryParamsDidChange: function() {
      this.refresh();
    }

  }

});

控制器/ articles.js

import Ember from 'ember';

var ArticlesController = Ember.ArrayController.extend({
  itemController: 'article',
  queryParams: ['sort'],
  sort: 'rating',

  page: 1,
  perPage: 10


});

export default ArticlesController;

视图/ articles.js

import Ember from 'ember';

export default Ember.View.extend({

  didInsertElement: function(){
    //this.scheduleMasonry();
    this.applyMasonry();
    // we want to make sure 'this' inside `didScroll` refers
    // to the IndexView, so we use jquery's `proxy` method to bind it
    //this.applyMasonry();
    $(window).on('scroll', $.proxy(this.didScroll, this));

  },

  willDestroyElement: function(){
    this.destroyMasonry();
    // have to use the same argument to `off` that we did to `on`
    $(window).off('scroll', $.proxy(this.didScroll, this));
  },

  // this is called every time we scroll
  didScroll: function(){
    if (this.isScrolledToBottom()) {
      $('#pagination_spinner').addClass('active');
      this.get('controller').send('getMore');
    }
  },

  scheduleMasonry: (function(){
    Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
  }).observes('controller.model.@each'), //TODO check

  applyMasonry: function(){
    $('#pagination_spinner').removeClass('active');

    var $galleryContainer = $('#galleryContainer');
    $galleryContainer.imagesLoaded(function() {
      // check if masonry is initialized
      var msnry = $galleryContainer.data('masonry');
      if ( msnry ) {
        msnry.reloadItems();
        // disable transition
        var transitionDuration = msnry.options.transitionDuration;
        msnry.options.transitionDuration = 0;
        msnry.layout();
        // reset transition
        msnry.options.transitionDuration = transitionDuration;
      } else {
        // init masonry
        $galleryContainer.masonry({
          itemSelector: '.item',
          columnWidth: 0,
          "isFitWidth": true
        });
      }
    });
  },

  destroyMasonry: function(){
    $('#galleryContainer').masonry('destroy');
  },

  // we check if we are at the bottom of the page
  isScrolledToBottom: function(){
    var distanceToViewportTop = (
    $(document).height() - $(window).height());
    var viewPortTop = $(document).scrollTop();

    if (viewPortTop === 0) {
      // if we are at the top of the page, don't do
      // the infinite scroll thing
      return false;
    }

    return (viewPortTop - distanceToViewportTop === 0);
  }
});

Answer 1

没有什么聪明的想法出现在我的脑海里，但也许就是那个......

你已经有了这条线：

if (meta.hasmore) {

在getMore()函数中。这种情况是你在一个回复中得到这个meta字段而在另一个回复中忘了吗？

具有参数的ember模型查找查询不会显示在分页上

1 个答案: