0

コレクション内のデータをテンプレートに表示しようとしています。私の残りのコンソールでは、コレクションが作成されていることがわかります。しかし、私は自分のアプリケーションでそれを行うことができません。コードは次のとおりです。ビューでは、レンダリングは次のようになります。

  render : function() {
                var template = _.template(tpl,{
                       CollectionForTemplate: this.Collection.toJSON(),
                this.el.html(template);

                },

ビューでは、フェッチを呼び出す関数は次のとおりです。

  loadTariffGrids: function(){
                       //fetch done here
                          if (Collection.length > 0) {
                                _.each(Collection, function(Model) {
                                       JSON.stringify(Model);
                           alert(JSON.stringify(Model));
                                }, this);
                          };
                          this.render;
                       }});


             },

最後に、テンプレートは次のとおりです。

                       <span>
                       <%  _.each(CollectionForTemplate, function(model) { %>
                       </span>      
                       <td><%= model.cost %></td>

                        <%     }); %>

どこが間違っていますか？

4

2 に答える 2

0

レンダリングでは、次を使用します。

CollectionForTemplate: this.Collection;

ビューを次のように変更します。

var self = this;
//fetch done here
if (Collection.length > 0) {
                            _.each(Collection, function(Model) {
                                   JSON.stringify(Model);
                            }, this);
};
self.Collection = Collection;
self.render;

テンプレートに渡すコレクションがインスタンス化されていないと思います。そのため、制御がフェッチ関数に渡される前に、self を使用して参照を格納します。私の説明が良くないことはわかっています。詳しい方、詳しい説明をお願いします。お役に立てれば

于 2012-08-16T12:29:51.130 に答える
0

わかりました @Amateur では、ニーズを適切に解決してみましょう。

注意: すべてのコードは自由気ままに書かれています。箱から出してすぐに動作するとは思わないでください。インスピレーションとして使用してください。

まず第一に、テンプレートでプログラムロジックを使用することはあまり良い考えではありません。これは単なる設計上の決定です。ここではあまりアカデミックに見えたくありませんが、これに柔軟性がありすぎると、非常に難しいもので終わる可能性があると思いますメンテナンスコードへ。

したがって、テンプレートが決定/計算を行う必要がないように、データを製造するという考え方です。テンプレートにループが必要な場合は、サブテンプレートを使用しましょう。

あなたのコード例から私が理解しているのは、次のようなコレクションがあるということです:

[
  {
    "id": "1",
    "cost": 100,
    "name": "Amateur"
  },

  {
    "id": "2",
    "cost": 200,
    "name": "Other name"
  },

  {
    "id": "3",
    "cost": 300,
    "name": "Other name again"
  },
]

そして、次のようなものをレンダリングしたいとします:

<table>
  <tr>
    <td>Name</td>
    <td>Cost</td>
  </tr>

  <tr>
    <td>Amateur</td>
    <td>100</td>
  </tr>

  <tr>
    <td>Other name</td>
    <td>200</td>
  </tr>

  <tr>
    <td>Other name again</td>
    <td>300</td>
  </tr>
</table>

あなたが送信した別の（重複した）質問を読んだので、次のようにcostの場合にのみレンダリングする必要もあります。name == "Amateur"

<table>
  <tr>
    <td>Name</td>
    <td>Cost</td>
  </tr>

  <tr>
    <td>Amateur</td>
    <td>100</td>
  </tr>

  <tr>
    <td>Other name</td>
    <td>--</td>
  </tr>

  <tr>
    <td>Other name again</td>
    <td>--</td>
  </tr>
</table>

反復

繰り返しのために、サブテンプレートで解決します。

マスター テンプレート:

<script type="text/template" id="template-elements">
  <table>
    <tr>
      <td>Name</td>
      <td>Cost</td>
    </tr>
  </table>
</script>

サブテンプレート

<script type="text/template" id="template-element">
  <tr>
    <td><%= name %></td>
    <td><%= cost %></td>
  </tr>
</script>

よりエレガントViewにするために、 forCollectionとSubViewfor eachも使用してみましょうModel。

var MyModel = Backbone.Model.extend();
var MyCollection = Backbone.Collection.extend({
  model: MyModel
});

var MyModelView = Backbone.View.extend({
  template: _.template( $("#template-element").html() ),

  render: function(){
    this.$el.html( this.template( this.model.toJSON() ) );

    return this;
  }
});

var MyCollectionView = Backbone.View.extend({
  template: _.template( $("#template-elements").html() ),

  render: function(){
    this.$el.html( this.template() );

    this.collection.each( function( model ){
      var view = new MyModelView({ model: model });
      this.$el.find( "table" ).append( view.render().el );
    });

    return this;
  }
});

デコレータ

Model.cost繰り返しの問題を解決したので、 whenを非表示にするロジックを実装しModel.name != "Amateur"ます。

Modelすでにクックされたテンプレートの属性を返すメソッドを実装しましょう:

var MyModel = Backbone.Model.extend({
  toJSONCooked: function(){
    var json = this.toJSON();

    if( this.get( "name" ) != "Amateur" ) {
      json.cost = "--";
    }

    return json;
  }
});

このメソッドを使用して、テンプレートをフィードできます。

var MyModelView = Backbone.View.extend({
  template: _.template( $("#template-element").html() ),

  render: function(){
    this.$el.html( this.template( this.model.toJSONCooked() ) );

    return this;
  }
});
于 2012-08-17T12:39:40.703 に答える