0

backbone.js とアンダースコア テンプレート システムを使用して、json ファイルからデータを動的に表示しています。<%console.log('template test') %> を使用して HTML にコンソール ログを記録すると、テンプレートが機能しません また、jsonファイルをループして「価格」を取得し、テンプレートで表示するにはどうすればよいですか?

質問が明確でない場合は、さらに説明しようとします。どんな助けでも大歓迎です、ありがとう!

このようなjsonファイルのサンプル

//addToCartResponce.json//

  {    
 "response":{
    "headers":{
       "store":"123",
        "id":"321"
     },
     "cart":{
        "message":"na",
       "orderId":"333",
        "orderItems":{
           "orderItem":[
               {
                "price":"$1.00",
                 "qty":"1",
                  "methods":{
                     "selectedMethod":{
                        "SelectedFFMCenter":"DDC",
                        "SelectedStore":"na"
                     }
                  }
               }
            ]
         }
      }
   }
}

これが私のバックボーンファイルです。

コレクション

var cartCollection = Backbone.Collection.extend({
      el: this,
      url: function() {
          return window.location.href + '/assets/js/ajax/addToCartResponce.json'
       },
       parse: function(resp) {
           return resp.response;
       },
          initialize: function() {
                  this.fetch({
                    async: false
                   });

                  this.on('add',this.cartFunction());
                  var shoppingCart = this.pluck('cart'); 
                  console.log("this.pluck('cart')");
                  console.log(shoppingCart);

         }, // end of initialize

        cartFunction: function(){
           console.log('cart Functon');

        }


});  // The console logs in cartCollection are working.

意見

cartContent = Backbone.View.extend({
            el: $('.cartContent'),
            initialize: function() {
               this.render();
         },

         render: function( ){
           this.collection = new cartCollection();
           var cart_template = _.template( $(".cartContentTemplate").html() ); 
           this.$el.html( cart_template );

               return this; 
              }
 });

   cartView = new cartContent();

HTML

<script type="text/template" class ="cartContentTemplate">  
    <div class="cartContent">
      <% console.log('template test'); %>
    </div>
</script>
4

1 に答える 1

2

_.template関数を返します。入力された html を取得するには、その関数に必要なデータを渡す (または何も渡さない) 必要があります。render as を書き直す

render: function () {
    this.collection = new cartCollection();
    var cart_template = _.template( $(".cartContentTemplate").html() ),
        html = cart_template();

    this.$el.html(html);

    return this; 
}

価格を表示するには？

以下の 2 つのリンクで、アンダースコア テンプレートの記述について詳しく読むことができます。

http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm

underscore.js をテンプレート エンジンとして使用するには?

あなたの質問に答えるために、

<script type="text/template" id="cartContentTemplate">  
    <div class="cartContent">
      <% if (cart && cart.orderItems) { 
            _.each(cart.orderItems.orderItem, function (item) { %>

             <div> Price: <%- item.price %> </div>

      <% });
      } %>
    </div>
</script>

別の観察では、クラス セレクターを使用してテンプレート スクリプトを取得しています。スクリプト タグは、class 属性を持つことを意図していませんでした。有効な html ではありません。現在、一部のブラウザーで動作する可能性がありますが、現在または将来、他のブラウザーで動作しなくなる可能性があります。代わりに id セレクターを使用する必要があります。テンプレートを次のように書き換えます。

<script type="text/template" id="cartContentTemplate">  
    <div class="cartContent">
      <% console.log('template test'); %>
    </div>
</script>

を使用してテンプレートを読み込みます

var cart_template = _.template($("#cartContentTemplate").html());
于 2012-11-25T17:59:14.323 に答える