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

【问题标题】：Mustache looping error when trying to display data尝试显示数据时出现 Mustache 循环错误
【发布时间】：2012-11-20 10:31:04
【问题描述】：

我在胡须中循环时遇到问题。基本上一个 usr 有能力为产品添加选项。每个选项可以有超过 1 个选项。他们也走到一起选择名称+价格。我收到以下错误：

未捕获的错误：未打开的部分：选择

我的代码：

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>

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

谢谢。

【问题讨论】：

标签： javascript jquery templates mustache templating

【解决方案1】：

循环的语法是{{#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/

【讨论】：