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: function () {
    this.collection = new cartCollection();
    var cart_template = _.template( $(".cartContentTemplate").html() ),
        html = cart_template();

    this.$el.html(html);

    return this; 
}

如何显示价格？

您可以通过以下两个链接阅读有关编写下划线模板的更多信息：

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>

另一个观察结果是，您正在使用类选择器获取模板脚本。脚本标签并不意味着具有类属性。它不是有效的 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 回答