0

あなたの助けはこれを行う方法を学ぶことに感謝します、私がこれに似たコードを持っているとしましょう。

バックボーンスクリプト：

$(function(){
  var Band = Backbone.Model.extend();
    var BandList = Backbone.Collection.extend({
    model: Band,
    url: 'feed1.json'
  });

  var BandsView = Backbone.View.extend({
    template: _.template($('#bandlist_template').html()),
    render: function(eventName) {
      _.each(this.model.models, function(band){
        var lTemplate = this.template(band.toJSON());

        $(this.el).append(lTemplate);
      }, this);
      return this;
    }
  });

  var lBands = new BandList;

  var AppView = Backbone.View.extend({
    el: "body",

    render: function(){
      var lBandsView = new BandsView({model:lBands});
      var lHtml = lBandsView.render().el;
      $('#bands').html(lHtml);
    },

    initialize: function(){
      var lOptions = {};
      lOptions.success = this.render;
      lBands.fetch(lOptions);
    }
  });

  var App = new AppView;
});

Underscore jsテンプレート：

<script type="text/template" id="bandlist_template">
  <?php echo "hello"; ?><li><%= band_name %> - <%= section %></li>
</script>

HTML：

<ul id="bands">
</ul>

Json：

[
  {
    "id": "149",
    "band_name": "Armthorpe Elmfield",
    "section": "Fourth"
  },
  {
    "id": "127",
    "band_name": "Barnsley Chronicle",
    "section": "Second"
  },
  {
    "id": "155",
    "band_name": "Barnsley Metropolitan Band",
    "section": "Fourth"
  }
]

Ok。css属性に応じてスタイルを変更したいとしjson sectionます（divを配置するだけで、jsonsection属性のみがスタイルになります'Fourth'）。divしたがって、その属性をフィルタリングして、同じ内に配置された別のバックボーンjsにプッシュする方法ul。

これと同じように：

<ul id="bands">
</li>Armthorpe Elmfield - <div class="styled">Fourth</div><li>
</li>Barnsley Chronicle - Second<li>
</li>Barnsley Metropolitan Band - <div class="styled">Fourth</div><li>
</ul>
4

1 に答える 1

0

必要なものはすべて揃っています。テンプレートを使用するだけです。

<script type="text/template" id="bandlist_template">
    <?php echo "hello"; ?>
    <li><%= band_name %> - 
        <% if section is 'Fourth': %>
            <div class="styled">Fourth</div>
        <% else: %>
            <%= section %>
        <% end %>
    </li>
</script>

もちろん、もっと良くすることもできますがif、テンプレートで他の制御構造が問題なく機能することを証明するだけです。（この例ecoでは、ifで構文を使用していますが、必要に応じて通常のjavascriptを使用するように修正してください）。

于 2012-10-22T14:53:20.167 に答える