Question

我使用backbone.js和下划线模板系统来动态显示json文件中的数据。当我使用＆lt;％console.log（'template test'）登录html时，我的模板无效。％＆gt;在尝试使用下划线模板时，我做错了什么？另外，我如何循环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>

Answer 1

_.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

How to use underscore.js as a template engine?

要回答你的问题，

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

通过带有主干的json文件循环并使用下划线模板显示

1 个答案: