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()));
        }
    });

いくつかの点であなたのアプローチとは少し異なります。まず、アンダースコアのテンプレート機能を利用します。これは、span から li、div まで何でもかまいません。<%= %> を使用して、(model.term 属性から取得される) 何らかの値を補間することを示します。

ハンドラーに移動してからレンダリングする代わりに、コレクションをバインドしてレンダリングします。

は、render()常に全体を更新し、ゼロから構築することを前提としています。addAllTerms()コレクションを循環するだけです。私の怠け者には3文字が長すぎることを除いて、forEach()またはeach()同じものを使用できます。forEach();-)

最後に、addTerm()関数はモデルを取得し、それを #suggestions に追加する値として使用します。基本的に、「テンプレートに補間値を追加する」と言っています。上記のテンプレート関数をこの View オブジェクト プロパティとして定義して、テンプレートをデータから明確に分離しました。この部分をスキップすることもできますが、そうでappend('<span>' + someModel.get('term') + '</span>')ない場合もあります。_.template() はテンプレートを使用し、テンプレート内のものと一致するプロパティを持つ任意の種類のオブジェクトも受け取ります。この場合は「期間」です。

それはあなたがしていることをするための別の方法です。このコードはもう少し扱いやすいと思います。たとえば、コレクション全体を更新せずに新しい用語を追加したい場合があります。addTerm()機能は自立できます。

編集：

それほど重要ではありませんが、私が便利だと思ったテンプレートで利用しているもので、最初に始めたときには見当たりませんでした. テンプレート関数に を渡す場合model.toJSON()、基本的にすべてのモデル属性を渡します。したがって、モデルが次のような場合:

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

前の例では、属性のタイムスタンプも渡されます。これは使用されず、使用されるだけ<%= term %>です。ただし、テンプレートに追加することで、簡単に補間することもできます。私が言いたいのは、1 つのモデルのデータに限定する必要がないということです。複雑なテンプレートには、複数のモデルからのデータが含まれる場合があります。

それが最善の方法かどうかはわかりませんが、私がしているのは次のようなものです。

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;
}

そのため、独自のカスタム ハッシュを簡単に作成してテンプレートにスローし、補間するすべてのデータを 1 つのオブジェクトに集約して、テンプレートに渡すことができます。

// 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 に答える