0

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

代码：

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 并显示每个集合内的“文本”属性并将其附加到 ('#suggestions') el。谢谢

4

2 回答 2

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 的模板功能。这可以是从 span 到 li 到 div 的任何东西。我们使用 <%= %> 表示我们将插入一些值（这将来自我们的 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'
}

在我们之前的示例中，还传入了属性 timestamp。它没有被使用，只<%= 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>')

我不确定这是否是最好的方法，但它帮助我准确了解了哪些数据将进入我的模板。也许很明显，但当我刚开始时，它不适合我。

于 2012-08-17T17:59:17.827 回答
0

我找到了问题的解决方案，我会把它放在这里给可能想知道的人：

render: function(){
            this.collection.forEach(function(item){
                alert(item.get("text"));
            });
         }
于 2012-08-17T17:47:37.283 回答