Question

我正在使用木偶复合视图来显示一个集合，代码如下。

但是，在我的集合中，我有5个过滤器绑定到事件，然后从API更新集合。

我看到它的方式，有两种选择，我希望哪种观点更好：

1）使用布局视图，以某种方式弄清楚复合视图如何捕获过滤器视图选项并更新集合。 2）使用onRender显示过滤器视图并再次捕获复合视图中的事件

define(["marionette", "text!app/templates/posts/collection.html", "app/collections/posts", "app/views/posts/item"],
  function(Marionette, Template, Collection, Item) {
    "use strict"
    return Backbone.Marionette.CompositeView.extend({


      template: Template,
      itemView: Item,
      itemViewContainer: "tbody",


      filter: {
        from: 0,
        to: 15,
        publish_target: null,
        status: null,
        type: null,
        publish_from_date: null, //publish_from_date=2014-01-07
        publish_to_date: null, //publish_to_date=2014-01-07
        publish_from_time: null, //publish_from_time=01%3A00%20AM
        publish_to_time: null, //publish_to_time=12%3A30%20AM
        location_id: null,
        client_id: null
      },


      events: {
        'change .filterBy': 'onClickFilter',
        'change .filterByDate': 'onClickFilterDate'
      },


      collectionEvents: {
        'sync': 'hideLoading'
      },


      initialize: function(options) {

        //set loading, important we do this because we re-trigger the collection
        this.setLoading();

        // don't call a new collection unless its the init load, we lose collection automatically triggered events otherwise
        if (_.isEmpty(options) || !_.has(options, 'newCollection')) {
          this.collection = new Collection()
        }

        //strip any null key values from this.filter so the api doesnt filter crap
        this.filter = _.cleanNullFieldsFromObject(this.filter);

        //fetch the collection
        return this.collection.fetch({data: this.filter})
      },


      // date was triggered, so get the details
      onClickFilterDate: function() {
        var publishFrom = new Date($('#publish_from_date').val());
        var publishTo = new Date($('#publish_to_date').val());
        this.filter.publish_from_date = _.dateToYMD(publishFrom);
        this.filter.publish_to_date = _.dateToYMD(publishTo);
        this.filter.publish_from_time = _.dateToHM(publishFrom);
        this.filter.publish_to_time = _.dateToHM(publishTo);

        // from time is greater than two time, then fetch the collection
        if ( (publishFrom.getTime() / 1000) < (publishTo.getTime() / 1000) ) {
          this.initialize({newCollection: true});
        }
      },


      // a typical filter is clicked, so figure out whats happening
      onClickFilter: function (ev) {
        var type = $('#'+ev.currentTarget.id).data('type')
        switch (type) {
          case 'status':
            this.filter.status = $('#filterStatus').val();
            break;
          case 'publish_target':
            this.filter.publish_target = $('#filterPublishTarget').val();
            break;
          case 'type':
            this.filter.type = $('#filterType').val();
            break;
          case 'client_id':
            this.filter.client_id = $('#filterClientId').val();
            break;
          case 'location_id':
            this.filter.location_id = $('#filterLocationId').val();
            break;
        }
        this.initialize({newCollection: true});
      },


      hideLoading: function() {
        this.$el.find('.loading-latch').removeClass('loading-active');
      },


      //set loading by appending to the latch
      setLoading: function() {
        this.$el.find('.loading-latch').addClass('loading-active');
      }


    })
  })


define(["marionette", "text!app/templates/posts/item.html"],
  function(Marionette, Template) {
    "use strict"
    return Backbone.Marionette.ItemView.extend({
      template: Template,
      tagName: "tr",


      initialize: function () {
        this.model.set('statusReadable', this.model.getStatus());
      }

    })
  })

Answer 1

我实际上是继续建造两者。我更喜欢布局视图。

两者都有一个过滤器对象的概念，该过滤器对象将查询参数提取并传递给api。

以下是两种解决方案。

使用捕获过滤器的布局：更改通风口然后更新传递到集合视图的过滤器对象（我赞成这一点，因为只有在更改过滤器时才会重新绘制集合）

http://pastebin.com/XNmQjs1i

使用捕获类事件并重绘视图的集合视图（我不赞成这一点，因为每次用户更改过滤器时都会重绘所有内容）

http://pastebin.com/WML2iiM4

我相信这对木偶新手来说可能会派上用场，我的学习很多都是为了这个。享受。

我应该使用Marionette CompositeView还是Layout？

1 个答案: