我怎样才能 select 在小胡子的嵌套循环中 select 框中的正确选项?

How can I select the correct option in select box in a nested loop in mustache?

我有一个生成 <select> 标签的嵌套循环,我想将它们设置为特定值。 我想我可以创建一个 lambda {{selected}} 来获取上下文并检查它是否是这个 select 框的正确值。除了我还需要 {{team}} 数组中的 id。

对于单个 select,您可以在 champions 中包含一个 selected 布尔值,但这会很快变得混乱 select 框。

是否有获取所需信息的方法,或生成 selected 属性的其他方法?我将 Clojure 的 Stencil 与数据一起使用,如下所示:

  {:params {"winner0" 16, "winner1" 4, ...}
   :champions [{:name "Soraka", :id 16}, ...]
   :team (range 5)
   :selected (fn [] if params[idx] == champion-id: return selected)}

HTML 摘录:

  <form method="get" action="">
          {{#team}}
                  <select name="winner{{.}}">
                      <option value="">None</option>
                      {{#champions}}
                      <option {{selected}} value="{{id}}">{{name}}</option>
                      {{/champions}}
                  </select>
          {{/team}}
      <input type="submit" value="Recommend my pick!" />
  </form>

Mustache 模板应该是 "dumb"。尽管存在 lambda 构造,但它的功能非常有限。最好的办法是转换数据,使其已经 "massaged" 用于模板。 Clojure 在这里大放异彩:它具有非常强大的数据转换原语。

这是一个基于您的示例(为简洁起见进行了缩减):

(require '[stencil.core :as stencil])

(def form "{{#teams}}
              <select name='winner{{id}}'>
                <option value=''>None</option>
                {{#champions}}
                <option {{#selected}}selected='selected' {{/selected}}value='{{id}}'>{{name}}</option>
                {{/champions}}
              </select>
           {{/teams}}")


(let [data {:params {"winner0" 16, "winner1" 4}
            :champions [{:name "Soraka", :id 16}
                        {:name "champ4" :id 4}
                        {:name "champ5" :id 5}]}]
  (->> (range 2)
       (map (fn [team-id]
              (let [winner (get (:params data) (str "winner" team-id))]
                {:id team-id
                 :champions (map #(assoc % :selected (= (:id %) winner))
                                 (:champions data))})))
       (hash-map :teams)
       (stencil/render-string form))

结果:

<select name='winner0'>                                                                                                                                                                                                                                        
  <option value=''>None</option>                                                                                                                                                                                                                               
  <option selected='selected' value='16'>Soraka</option>                                                                                                                                                                                                       
  <option value='4'>champ4</option>                                                                                                                                                                                                                           
  <option value='5'>champ5</option>                                                                                                                                                                                                                           
</select>                                                                                                                                                                                                                                                      
<select name='winner1'>                                                                                                                                                                                                                                        
  <option value=''>None</option>                                                                                                                                                                                                                               
  <option value='16'>Soraka</option>                                                                                                                                                                                                                          
  <option selected='selected' value='4'>champ4</option>                                                                                                                                                                                                        
  <option value='5'>champ5</option>                                                                                                                                                                                                                           
</select> 

尽管这似乎可以满足您的需要,但如果您有机会选择,我强烈建议您使用 hiccup 之类的东西。它是一个使用 clojure 数据结构来表示 html 的 DSL,因此它非常具有表现力和功能。