只有模型属性可见的模板 itemViews 为真

Question

我有一个 CompositeView，它是一个 select 框，将选项输出为子视图，我希望能够仅输出模型属性 viewable 为 true 的选项，但我'我不确定如何在每个生成的元素上实现这一点。我可以将 option 移动到模板内部，然后将其包装在条件语句中，但随后会生成一个 div，这会破坏 select 的语义。谁能告诉我应该如何处理这个问题？

JS

var people = [{
    id: 1,
    name: 'Kyle',
    viewable: true
}, {
    id: 2,
    name: 'Peter',
    viewable: false
}, {
    id: 3,
    name: 'Simon',
    viewable: true
}];

// Create a Person Model
var Person = Backbone.Model.extend({});

// Create a People Collection
var People = Backbone.Collection.extend({
    model: Person
});

// Create a TableRowView -> ItemView
var Row = Marionette.ItemView.extend({
    template: '#row',
    tagName: 'option'
});

// Create a TableView -> CompositeView
var Overall = Marionette.CompositeView.extend({
    template: '#overall',
    childView: Row,
    childViewContainer: '.js-list',
    events: {
        'click .js-switch': 'onSwitchClick'
    },
    templateHelpers: function() {
        return {
            viewable: this.isViewable
        }
    },

    initialize: function() {
        console.log(this.collection.toJSON());

        this.isViewable = this.collection.filter(function(model){ 
            return model.attributes.viewable === true; 
        });

        console.log(this.isViewable);
    },

    onSwitchClick: function(event) {
        event.preventDefault();

        // Show all Only tem
        this.$('.js-list').select2();
    }
});

var region = new Backbone.Marionette.Region({ 
    el: '#region'
});

// Setup
var newPeople = new People(people);

var overall = new Overall({
    collection: newPeople
});

region.show(overall);

模板

<script type="text/html" id="overall">
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Esse iste recusandae quisquam voluptas dolorum, fugiat quaerat, dicta eum cupiditate rerum quas expedita quasi officiis quia harum quo, laborum vel debitis.. </p>


    <select class="js-list"></select>

    <button class="js-switch">Switch</button>
</script>
<script type="text/html" id="row">
    <%- name %>
</script>

Fiddle http://jsfiddle.net/99tay04x/2/

Answer 1

Collection.filter 到resque。

只需将 filter 添加到您的 Overall CompositeView:

filter: function (child) {
    return child.get('viewable')
}

这是使用过滤器的更新示例：http://jsfiddle.net/yuraji/hkdmz4oq/

这是一个简化的工作示例：

var people = [{
    name: 'Kyle', viewable: true
}, {
    name: 'Peter', viewable: false
}, {
    name: 'Simon', viewable: true
}];

var Person = Backbone.Model.extend();

var People = Backbone.Collection.extend({
  model: Person
});

var PersonView = Mn.ItemView.extend({
  render: function(){
    this.$el.html( this.model.get('name') );
    return this;
  }
});

var PeopleView = Mn.CollectionView.extend({
  childView: PersonView,
  /**
    `filter` method is available in a CollectionView,
    as well as in a CompositeView, which extends from CollectionView
  */
  filter: function(child, index, collection){
    return child.get('viewable');
  }
});

var peopleView = new PeopleView({
  collection: new People(people)
});
peopleView.render().$el.appendTo(document.body);

body * {
  border: 1px solid gray;
  margin: 2px;
}

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js'></script>

只有模型属性可见的模板 itemViews 为真

Only template itemViews who's model attribute viewable is true

jquery

backbone.js

underscore.js

marionette