尝试显示数据时出现Mustache循环错误

时间:2012-12-02 23:24:13

标签: javascript jquery templates mustache templating

我在胡子中做循环时遇到问题。基本上,usr能够为产品添加选项。每个选项可以有多个选择。他们也聚在一起选择名称+价格。我收到以下错误:

未捕获错误:未打开的部分:选项

我的代码:

var choices = new Object();

    $("[name='choice_name']").each(function(){
        var c_name = $(this).val();
        $("[name='choice_price']").each(function(){
            var c_price = $(this).val();
            choices.choice_name = c_name;
            choices.choice_price = c_price;
        });
    });

    console.log(choices);

    var templateData = {
        name: $("[name='option_name']").val(),
        type: $("[name='option_type']").find("option:selected").val(),
        choices: choices
    };

    $.get(default_url+"js_temp/options_widget.html", function(templates){
        $('.current_options').append(Mustache.render(templates, templateData));
    });

HTML:

<div>
  <p class="pull-right"><i class="icon icon-pencil"></i><br /><i class="icon icon-trash"></i></p>
    <p><strong>Option Name:</strong> {{option_name}}</p>
    <p><strong>Option Type:</strong> {{option_type}}</p>
    <hr>
    {{choices}}
    <div class="row-fluid">
      <div class="span7"><p><strong>Choice Name:</strong> {{choice_name}}</p></div>
      <div class="span5"><p><strong>Price:</strong> {{choice_price}}</p></div>
    </div>
    {{/choices}}
</div>

我认为我无法为选择对象实现正确的格式。我做错了什么?

谢谢。

1 个答案:

答案 0 :(得分:5)

循环的语法是{{#choices}} {{prop}} {{/choices}} - 看起来你错过了#

{{#choices}}
    <div class="row-fluid">
      <div class="span7"><p><strong>Choice Name:</strong> {{choice_name}}</p></div>
      <div class="span5"><p><strong>Price:</strong> {{choice_price}}</p></div>
    </div>
{{/choices}}

另外,在构造choices时,你要覆盖每个对象 - 我想你想把每个对象都推到数组中。试试这个:

var choices = [];

$("[name='choice_name']").each(function(){
    var c_name = $(this).val();
    $("[name='choice_price']").each(function(){
        var c_price = $(this).val();
        choices.push({ 
            choice_name: c_name, 
            choice_price: c_price 
        });
    });
});

见这里:http://jsfiddle.net/U6pLT/1/