Sorting 带有参数的余烬模型查找查询不';分页时不显示

Sorting 带有参数的余烬模型查找查询不';分页时不显示,sorting,ember.js,pagination,ember-data,Sorting,Ember.js,Pagination,Ember Data,2我有一个Ember应用程序,它连接到一个api,从那里可以获取文章。我利用分页来获得每个请求10篇文章。这很有效。但现在我想在请求中添加排序。我通过使用store.find中的额外参数实现了这一点 但是,由于某种原因,如果我使用“returnthis.store.find('article',params);”而不是“返回this.store.find('article');”getMore函数中的新项目(仍被请求并正确添加到存储!)未显示或呈现。但当我从模型中的store.find中删除pa

2我有一个Ember应用程序,它连接到一个api,从那里可以获取文章。我利用分页来获得每个请求10篇文章。这很有效。但现在我想在请求中添加排序。我通过使用store.find中的额外参数实现了这一点

但是,由于某种原因,如果我使用“returnthis.store.find('article',params);”而不是“返回this.store.find('article');”getMore函数中的新项目(仍被请求并正确添加到存储!)未显示或呈现。但当我从模型中的store.find中删除params参数时,它确实起作用。这里可能是什么情况

模板/文章.hbs

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

      {{#each itemController="article"}}

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

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

  }

});
import Ember from 'ember';

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

  page: 1,
  perPage: 10


});

export default ArticlesController;
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);
  }
});
views/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();
    }

  }

});
import Ember from 'ember';

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

  page: 1,
  perPage: 10


});

export default ArticlesController;
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);
  }
});

我脑子里没有什么聪明的想法,但也许是

你有一句话:

if (meta.hasmore) {

getMore()函数中。是不是在一个响应中有了这个
meta
字段,而在另一个响应中忘记了它?

否,没有任何改变。行:controller.set('page',controller.get('page')+1);已正确执行,但添加到存储区的项目没有显示。hbs中的表是如何实现的?也许你只是缺少合适的听众?我把它插入了我的帖子。我的{{{#each}实现是否正确?因为它应该侦听存储更改,对吗?