只有模板itemViews的模型屬性可見

Question

我有一個CompositeView，它是一個選項框，將選項輸出爲childViews，我希望只能輸出選項的模型屬性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> 

小提琴 http://jsfiddle.net/99tay04x/2/

Answer 1

Collection.filter到resque。

只需添加filter您OverallCompositeView：

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>