如何在 Marionette ItemView 中更新集合中的对象 运行 toJSON？

Question

我在集合中创建了一个包含模型的自定义对象，当我在 ItemView 中选择这个对象时 this.options.unique 我不能 运行 .toJSON 因为我得到一个错误说 Uncaught TypeError: this.options.unique.toJSON is not a function。想知道我该如何解决这个问题？

Fiddle http://jsfiddle.net/kyllle/73m2ena9/3/

JS

var PersonModel = Backbone.Model.extend();
var PeopleCollection = Backbone.Collection.extend({
    model: PersonModel
});


var PersonsItemView = Mn.ItemView.extend({
    template: '.js-tmpl',

    templateHelpers: function() {
        return {
            unique: this.options.unique
        }
    },

    initialize: function() {
        console.log(this.options.unique.toJSON());
    }
});


var peopleCollection = new PeopleCollection(peopleArr);

var unqiueList = peopleCollection.filter(function(person) {
    include = true;
    exclude.forEach(function(exl) {
        console.log(exl);
        if (JSON.stringify(exl) == JSON.stringify(person)) {
            include = false;
            return;
        }
    })
    if (include) return person;
});

console.log(unqiueList);

var personsView = new PersonsItemView({
   unique: unqiueList
});


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

region.show(personsView);

更新 我在模板 each 中添加了一个变量来抓取模型并转向 toJSON，谁能告诉我这种方法是否可以接受？

<script type="text/html" class="js-tmpl">
<form action="">
    <% _.each(unique, function(person) { %>
        <% var personDetails = person.toJSON() %>
        <input type="radio"><%= personDetails.name %><br>
    <% }) %>
</form>

已更新 fiddle http://jsfiddle.net/kyllle/73m2ena9/7/

Answer 1

当您过滤一个集合时，它 returns 一个数组而不是您预期的集合 (ref)。因此，您可以使用从集合返回的数组创建新的集合实例。

var unqiueList = peopleCollection.filter(function(person) {
    include = true;
    exclude.forEach(function(exl) {
        console.log(exl);
        if (JSON.stringify(exl) == JSON.stringify(person)) {
            include = false;
            return;
        }
    })
    if (include) return person;
});

unqiueList= new peopleCollection.reset(unqiueList);

var personsView = new PersonsItemView({
   unique: unqiueList
});

FIDDLE LINK