从Google电子表格中获取数据时Handlebars.js中的条件

Question

我在

的地方

我使用Tabletop.js和Handlebars.js从Google电子表格中提取与政治家语句相关的所有数据，然后将其显示在页面上。

问题

a）我无法从控制台从特定对象获取validity的数据。当我调试.log（数据）时，我能够从Google电子表格中获取每个对象，但我还没能从第一个或第三个对象获得validity实例

控制台（单个对象）

Object {Facts: Tabletop.Model}
+-- Facts: Tabletop.Model
 ++-- column_names: Array[8]
 ++-- elements: Array[10]
   +++-- 0: Object
   +++-- citation1url: "Citation 1-1"
   +++-- citation2url: "Citation 2-1"
   +++-- citation3url: "Citation 3-1"
   +++-- datesaid: "2/20/2015"
   +++-- explanation: "Explanation 1"
   +++-- name: "Politician 1"
   +++-- rowNumber: 1
   +++-- statement: "This is my first statement"
   +++-- validity: "TRUE"

b）有语法问题，想知道在句柄中使用条件是否是最有效的方法，如果语句的validity更改元素的边框颜色（基于来自的数据）电子表格是真的，错误的还是未经证实的 vs。编写if / statement并使用jQuery的.css（）或.addClass（）？

尝试做这样的事情（两者都没有工作）

if (validity == true) {
     $(".container").css("border", "1px solid #2ECC40");
} else if (validity == unconfirmed) {
    $(".container").css("border", "1px solid #FFDC00");
} else (validity == false) {
    $(".container").css("border", "1px solid #FFDC00");
}

或

{#if Facts.validity.TRUE }}
    <div class="trueContainer container">
{{else if Facts.validity.FALSE}}
    <div class="falseContainer container">
{{else Facts.validity.UNCONFIRMED}}
    <div class="falseContainer container">
{{/if}}

---

链接

Google电子表格： https://docs.google.com/spreadsheets/d/1glFIExkcuDvhyu5GPMaOesB2SlJNJrSPdBZQxxzMMc4/pubhtml

JSBin： http://jsbin.com/zomopeqoza/1/edit?html,css,output

相关文件

脚本（目前内联）

<!-- This is where the template for facts goes -->
<script id="poli" type="text/x-handlebars-template">
<div class="container">
    <p class="claim">Claim: {{name}} has said "{{statement}}"</p>
    <p class="explanation">This statement is {{validity}}. This is reason number one and a detailed explanation. <a href=""><sup class="unconfirmed">1</sup></a> This is reason number two with a detailed explanation. <a href=""><sup class="unconfirmed">2</sup></a> And this is {{explanation}} <a href=""><sup class="unconfirmed">3</sup></a> These fact checking boxes should always include 2-3 cited explanation, written by the reporter and linked to a file on DocumentCloud or Soundcloud.</p>
</div>
</script>

var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1glFIExkcuDvhyu5GPMaOesB2SlJNJrSPdBZQxxzMMc4/pubhtml";

      $(document).ready( function() {
        Tabletop.init( { key: public_spreadsheet_url,
                         callback: showInfo,
                         parseNumbers: true } );
      });
      function showInfo(data, tabletop) {
        var source   = $("#poli").html();
        var template = Handlebars.compile(source);

        // The actual name of the sheet, not entire .csv
        $.each( tabletop.sheets("Facts").all(), function(i, fact) {
          var html = template(fact);

          // You need an element with this id or class in your HTML
          $("#poli-list").append(html);
          console.log(data);
        });
    }

的style.css

/*----------------------------------
MAIN STYLES
----------------------------------*/

.trueContainer {
    border: 2px solid #2ECC40;
}

.falseContainer {
    border: 2px solid #FF4136;
}

.unconfirmedContainer {
    border: 2px solid #FFDC00;
}

.container {
    margin-top: 1%;
    padding: 0.5%;
    width: 50%;
}

.claim, sup {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

sup {
    padding: 2px;
}

a {
    text-decoration: none;

}

.explanation {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.025px;
}

.true {
    color: #2ECC40;
}

.false {
    color: #FF4136
}

.unconfirmed {
    color: #FFDC00;
}