Question

我有这个骨干工作正常，我只是想渲染该集合已被提取！

代码：

var SearchView = Backbone.View.extend({
        events: {
            "keyup": "handleChange"
        },
        initialize: function(){
            this.collection.bind("reset", this.updateView, this);
        },
        render: function(){
          // this is where i need help 
          this.$el.next('#suggestions').append(// iterate over this.collection and apppend here) //

        },
        handleChange: function(){
            var term = this.$el.val();
            this.collection.search(term);
        },

        updateView: function() {

           this.render();
        }

    });

我只想迭代this.collection并在每个集合中显示“text”属性并将其附加到（'#suggestions'）el。感谢

Answer 1

专注于重置，渲染收藏问题，我就是这样做的。这种方式假设在创建视图时，$ el已经存在，并且您通过View构造函数传递它，因此它已准备就绪。

    var SearchView = Backbone.View.extend({
        template: _.template('<span><%= term %></span>');
        initialize: function(){
            this.collection.bind("reset", this.render, this);
        },
        render: function(){
            this.addAllTerms();
            return this;
        },
        addAllTerms: function() {
            var self = this;
            this.collection.each(function(model) {
                self.addTerm(model);
            });
        },
        addTerm: function(someModel) {
            this.$el.next('#suggestions').append(this.template(someModel.toJSON()));
        }
    });

在某些方面与您的方法略有不同。首先，我们使用Underscore的模板功能。这可以是从跨度到li到div的任何东西。我们使用＆lt;％=％＆gt;表示我们要插入一些值（来自我们的model.term属性）。

而不是去处理程序再渲染，我只是将集合绑定到渲染。

render()假设我们总是要刷新整个事情，从头开始构建。 addAllTerms()只是在集合中循环。您可以使用forEach()或each()这是相同的事情，除了forEach() 3个字符对我懒惰的屁股来说太长了。 ; - ）

最后，addTerm()函数接受一个模型并将其用于它将附加到#suggestions的值。基本上，我们说“使用插值附加模板”。我们将上面的模板函数定义为此View对象属性，以清楚地将模板与数据分开。虽然你可以跳过这部分只是append('<span>' + someModel.get('term') + '</span>')或者不是。 _.template（）使用我们的模板，并且还使用与我们模板中的属性对齐的属性获取任何类型的对象。在这种情况下，'术语'。

这是做你正在做的事情的另一种方式。我认为这段代码更容易管理。例如，您可能希望在不刷新整个集合的情况下添加新术语。 addTerm()函数可以独立存在。

编辑：

不是那么重要，但我使用的模板我发现有用，而且在我刚开始时我没有看到它。当您将model.toJSON()传递给模板函数时，我们实际上是传递了所有模型属性。因此，如果模型是这样的：

defaults: {
    term: 'someTerm',
    timestamp: '12345'
}

在前面的示例中，还传入了属性时间戳。它未使用，仅使用<%= term %>。但我们也可以通过将其添加到模板中来轻松插入它。我想要的是你不必限制自己来自一个模型的数据。复杂模板可能包含多个模型的数据。

我不知道这是不是最好的方式，但我做的是这样的事情：

makeHash: function() {
    var hash = {};
    hash.term = this.model.get('term');
    hash.category = anotherModel.get('category');

    var date = new Date();
    hash.dateAccessed = date.getTime();

    return hash;
}

因此，您可以轻松构建自己的自定义哈希以投入模板，将要插入的所有数据聚合到单个对象中以传递到模板中。

// Instead of .toJSON() we just pass in the `makeHash()` function that returns
// a customized data object

this.$el.next('#suggestions').append(this.template(this.makeHash()));

您还可以轻松传入整个对象。

makeHash: function() {
    var hash = {};
    hash.term = this.model.get('term');

    var animal = {
        name: 'aardvark',
        numLegs: 4
    };

    hash.animal = animal;

    return hash;
}

并将其传递到我们的模板中，如下所示：

template: _.template('<span><%= term %></span>
    <span><%= animal.name %></span>
    <span><%= animal.numLegs %></span>')

我不确定这是不是最好的方法，但它帮助我准确了解我的模板中的数据。也许是显而易见的，但是当我开始时，它并不适合我。

Answer 2

我找到了问题的解决方案，我想把它放在那些可能想知道的人身上：

render: function(){
            this.collection.forEach(function(item){
                alert(item.get("text"));
            });
         }

如何使用骨干渲染集合？

2 个答案: