[英]How to set the default selected radio button in a group depending on a database value?
[英]Meteor: How to set a radio button’s value depending on the value in the Database
網站的管理員可以創建新的學術出版物(例如: 已發表的論文 ( pp )或書籍章節 ( bc ))。 發布的類型由單選按鈕確定。 有四種不同的類型。
問題:管理員也可能在以后的階段中編輯一個已經存在的條目。 為此,我需要檢索type
的值並將其傳遞給template.html以預先選擇正確的單選按鈕。
這怎么可能? 任何幫助表示贊賞。
這是JSON,帶有來自Publications
集合的type
字段:
{
"_id" : "t4Zc23YSB9fJc8rW4",
"authors" : [
{
"lastName" : "Whittington",
"firstName" : "Richard"
},
{
"lastName" : "Cailluet",
"firstName" : "Ludovic "
},
{
"lastName" : "Douglas",
"firstName" : "Basak Yakis "
}
],
"title" : "Opening strategy: Evolution of a precarious profession",
"outlet" : "British Journal of Management, 22 (3)",
"year" : "2011",
"abstract" : "No Abstract ...",
"type" : "pp"
}
helper.js:
Template.adminPublicationsEdit.helpers({
pubEntry: function () {
return Publications.findOne({_id: this._id});
}
});
和template.html:
<template name="adminPublicationsEdit">
<div class="container extra-spacing-bottom">
<div class="putdown extra-spacing-bottom">
<h1 class="extra-spacing-bottom">EDIT ENTRY</h1>
<hr>
{{#with pubEntry}}
<form class="form-horizontal" id="addPub" role="form">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title" value="{{title}}" placeholder="Enter Title">
</div>
</div>
<div class="form-group">
<label for="year" class="col-sm-2 control-label">Year</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="year" name="year" value="{{year}}" placeholder="Enter Year of Publication">
</div>
</div>
<div class="form-group">
<label for="abstract" class="col-sm-2 control-label">Abstract</label>
<div class="col-sm-10">
<div name="abstract" id="abstract">
{{{abstract}}}
</div>
</div>
</div>
<div class="form-group js-radios">
<label for="Outlet" class="col-sm-2 control-label">Outlet</label>
<div class="col-sm-10">
<label class="radio-inline"><input type="radio" name="outlet-type" id="wp" value="wp">Working Paper</label>
<label class="radio-inline"><input type="radio" name="outlet-type" id="pp" value="pp">Published Paper</label>
<label class="radio-inline"><input type="radio" name="outlet-type" id="bk" value="bk">Book</label>
<label class="radio-inline"><input type="radio" name="outlet-type" id="bc" value="bc">Book Chapter</label>
</div>
</div>
{{#if ppSelected}}
<div class="form-group">
<label for="journal" class="col-sm-2 control-label">Journal</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="journal" name="journal" placeholder="Enter Name of Journal">
</div>
</div>
<div class="form-group">
<label for="pages" class="col-sm-2 control-label">Pages</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pages" name="pages" placeholder="Enter Pages">
</div>
</div>
{{/if}}
{{#if bkSelected}}
<div class="form-group">
<label for="publisher" class="col-sm-2 control-label">Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="publisher" name="publisher" placeholder="Enter Publisher">
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-2 control-label">Location of Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Enter Location of Publisher">
</div>
</div>
{{/if}}
{{#if bcSelected}}
<div class="form-group">
<label for="publisher" class="col-sm-2 control-label">Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="publisher" name="publisher" placeholder="Enter Publisher">
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-2 control-label">Location of Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Enter Location of Publisher">
</div>
</div>
<div class="form-group">
<label for="editors" class="col-sm-2 control-label">Editor(s)</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="editors" id="firstEditor" placeholder="Enter Book Editor(s)">
</div>
</div>
<div class="form-group">
<label for="pages" class="col-sm-2 control-label">Pages</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pages" name="pages" value="{{pages}}">
</div>
</div>
{{/if}}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="js-addEntry" class="btn btn-primary admin-button">UPDATE ENTRY</button>
</div>
</div>
</form> <!-- end form -->
{{/with}}
</div> <!-- putdown -->
</div> <!-- container -->
</template>
如果我理解您的問題,則想在Outlet form-group
選擇一個特定的單選按鈕,該按鈕與pubEntry
對象的type
的值相對應。 如果是這種情況,您可以實現一個Meteor幫助器並將類型作為函數參數傳遞。
例如:
if (Meteor.isClient) {
Template.adminPublicationsEdit.helpers({
// ...
isChecked: function(type) {
return (this.type === type) ? "checked" : "";
}
// ...
});
}
<template name="adminPublicationsEdit">
<!-- ... -->
<div class="form-group js-radios">
<label for="Outlet" class="col-sm-2 control-label">Outlet</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="outlet-type" id="wp" value="wp" {{isChecked 'wp'}}>Working Paper</label>
<label class="radio-inline">
<input type="radio" name="outlet-type" id="pp" value="pp" {{isChecked 'pp'}}>Published Paper</label>
<label class="radio-inline">
<input type="radio" name="outlet-type" id="bk" value="bk" {{isChecked 'bk'}}>Book</label>
<label class="radio-inline">
<input type="radio" name="outlet-type" id="bc" value="bc" {{isChecked 'bc'}}>Book Chapter</label>
</div>
</div>
<!-- ... -->
</template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.