基於模板值在選擇列表中設置所選項目

我有一個簡單的窗體來編輯一個記錄，其中所選記錄的值在顯示窗體時預先填充。有點像這樣：

<input type="text" id="project_name_edit" value="{{selected_name}}">

但是，在我使用的是選擇控制，我需要能夠interogate模板值並有條件地設置selected='selected'屬性爲正確的選項。

<select id="project_status_edit" value="{{selected_status}}"> 
     <option>GOOD</option> 
     <option>BAD</option> 
     <option>UGLY</option> 
</select>

handlesbars.js提供了#IF幫助程序，但這隻會導致真實或錯誤。

我可能以各種方式破解這個，但這似乎是一個場景，其中會有一個標準的解決方案。

來源

2012-08-25 Oliver Lloyd

我可能會使用腳本助手在'select'添加'selected'到每個「選項」中的適當的「選項」或「if」。你也可以預編譯'select'和'option's並描述哪個是'選擇選項'（我認爲）。我不知道有一個構造可以直接或優雅地在純手柄模板中處理這個問題。 –

使用'＃if'（或其他助手）是我的第一個想法，但我不知道如何獲得實際價值 - 是否有可能/你有一個例子嗎？預編譯可能會起作用，但是這個步驟不在結構之內，而是在刪除模板的好處，理想情況下我想避免這種路徑。 –

你的意思是''？ –

你可以使用一個幫手：

Handlebars.registerHelper('selected', function(foo, bar) { 
    return foo == bar ? ' selected' : ''; 
});

然後你就可以用撥打：

<select id="project_status_edit"> 
    <option{{selected foo "GOOD"}}>GOOD</option> 
    <option{{selected foo "BAD"}}>BAD</option> 
    <option{{selected foo "UGLY"}}>UGLY</option> 
</select>

使用：

{"foo":"UGLY"}

嘗試在這裏：

http://tryhandlebarsjs.com/

雖然它似乎沒有讓我保存它。 :(

來源

2012-08-25 18:32:12

或者您可以將handlebars.js從CDN拉下來，然後jsfiddle它：http://jsfiddle.net/ambiguous/w2wyU/1/ –

@ muistooshort - 謝謝。我知道，但謝謝。 '：）' –

我有一堆書籤在我的個人資料中'cuz我厭倦了跟蹤JS和CSS的所有各個部分。 –

我幾乎有一個相同的問題，但我通過的值是數字，我相信我有一個更清晰的解決方案，這是不依賴於Handlebars魔術。

在模板：

<select name="button-style" id="button-style" _val="{{button_style}}"> 
    <option value="1">Primary Style</option> 
    <option value="2">Secondary Style</option> 
</select>

基本上你傳遞你想與_Val選擇的屬性的數量。這僅在每個選項具有連續數值的情況下才有用。另請注意，如果您命名此屬性的'值'，它將被默認值覆蓋/忽略，該值將選擇第一個選項。

在您的JS文件.rendered回調

現在：

Template.templateName.rendered =() -> 
    var btn_style = $('#button-style').attr('_val') 
    $('#button-style option:nth-child(' + btn_style + ')').attr('selected', 'selected')

這僅僅選擇在對應於我們想要的值這個選擇字段的「第n」選項。

來源

2013-08-13 13:25:54

所選答案不再有效。這是一個古老的問題，但我很難把這件簡單的事情弄清楚。這裏是我的解決方案：

Handlebars.registerHelper('selected', function(key, value){ 
     return key == value? {selected:'selected'}: ''; 
});

在流星的當前版本中，我們不能設置HTML屬性沒有價值，而流星不允許使用{{＃如果}}無論是。但傳遞給幫助器的對象被轉換爲key = value對並注入。

UPDATE

使用UI.registerHelper，而不是在新Handlebars.registerHelper（> 0.8）流星的版本，因爲把手命名空間的折舊（https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated）。

來源

2014-03-15 15:08:59 channikhabra

現在我們正在開發Blaze，你可以使用UI.registerHelper而不是Handlebars.registerHelper。 – darkadept

這是一箇舊評論。我應該在那裏寫下版本號。 – channikhabra

我做了這個功能。適應你的情況

selectedOption=function(){ 
     selectedOpt=document.getElementById("yourTagId_Select"); 
     var att = document.createAttribute("selected"); 
     att.value = "selected"; 
     idObj=Session.get("idObj"); 
     var lib = yourCollection.find({'column._id':idObj}).fetch();  
     for (var i = 0; i < selectedOpt.length; i++) { 
      if (selectedOpt[i].value==lib._id._str){    
       return selectedOpt[i].setAttributeNode(att); 
      } 
     }; 


    }

調用函數

selectedOption後（）;

來源

2015-07-27 14:07:17

我曾經在我的項目（萬一有人需要它:)

<select class="form-control" id="maritalStatusList" > 
     <option {{selectedMaritalStatus "Single"}}> Single</option> 
     <option {{selectedMaritalStatus "Married"}}> Married</option> 
    </select>

及以下

Template.editApplicant.helpers({ 
    selectedMaritalStatus: function(key){ 
     return key == this.maritalStatus ? 'selected' : ''; 
    } 
});

「this.maritalStatus」會從當前文檔的婚姻狀況（申請人）。

使用下面的代碼，保存該值在數據庫中

maritalStatus: $('#maritalStatusList').val()

謝謝大家..

來源

2015-10-02 14:27:59 Yousef

基於模板值在選擇列表中設置所選項目

回答

相關問題