0
我在客户端使用Backbone.stickit，Backbone.marionette和Backbone作为版本页面。OptionGroup in select绑定到stickit
我的一个模型的领域是从下拉列表（<选择>）拾起，我想在下拉列表创建选项组（<OPTGROUP>）。我能怎么做？
/* Models */
// Language/Models.js
Language = Backbone.Model.extend({});
LanguageCollection = Backbone.Collection.extend({
model: Language
});
// Book/Models.js
Book = Backbone.Model.extend({});
/* Views */
// Book/Views.js
BookAttributesView = Marionette.ItemView.extend({
el: "#BookAttributesBox",
template: "#BookAttributesTemplate",
bindings:
{
"#Title": "Title",
"#AuthorName": "AuthorName",
"#LanguageCode": {
observe: "LanguageCode",
selectOptions: {
collection: new LanguageCollection([{ Name: "English", Code: "en"}, {Name: "German", Code: "de" }]),
labelPath: "Name",
valuePath: "Code"
}
}
},
onRender: function() {
this.stickit();
}
});
/* Render view */
var book = new Book({ Title: "Dune", AuthorName: "Frank Herbert", LanguageCode: "en" });
new BookAttributesView({ model: book }).render();body {
padding: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<script src="https://rawgithub.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<!-- Views/Books/Templates/BookAttributes.cshtml -->
<script type="text/template" id="BookAttributesTemplate">
<div class="form-group">
<label for="Title">Title</label>
<input id="Title" type="text" class="form-control" placeholder="Title"">
</div>
<div class="form-group">
<label for="AuthorName">Author</label>
<input id="AuthorName" type="text" class="form-control" placeholder="Author">
</div>
<div class="form-group">
<label for="LanguageCode">Language</label>
<select id="LanguageCode" class="form-control">
</select>
</div>
</script>
<!-- Views/Books/Edit.cshtml -->
<h1>Book edition</h1>
<h2>Attributes</h2>
<div id="BookAttributesBox"></div>