OptionGroup в избранном связан с наклейкой

Question

Я использую Backbone.stickit, Backbone.marionette и Backbone на стороне клиента для страницы издания.

Одно из полей моей модели выбрано из раскрывающегося списка (), и я хочу создать группы параметров () в раскрывающемся списке. Как я могу сделать?

/* 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>

1

javascript jquery twitter-bootstrap backbone.js backbone-stickit

Источник Поделиться

user1387242 01 апр '15 в 14:22 2015-04-01 14:22

2015-04-01 14:22

2 ответа

Решение

В документации по backbone.stickit я обнаружил, что мы можем переопределить метод обновления.

В привязку моего выбора я добавил следующий код:

update: function($el, val, model, options) {
LanguageChannel.data.languages.each(function(language){
    // Find parent.
    var parent = $el.find("#LanguageReadable");
    if (language.get("isEditable")){
        parent = $el.find("#LanguageEditable");
    }

    // Select correct value.
    var selected = "";
    if (language.get("Code") == val){
        selected = ' selected="selected"';
    }

    // Add option to optgroup.
    parent.append("<option" + selected + ">" + language.get("Name") + "</option>");
});}

Вот мое полное решение:

/* Models */
// Language/Models.js
Language = Backbone.Model.extend({});
LanguageCollection = Backbone.Collection.extend({
    model: Language
});
// Book/Models.js
Book = Backbone.Model.extend({});

languages = new LanguageCollection([
                  {Name: "English", Code: "en", isEditable:true},
                  {Name: "French", Code: "fr", isEditable:false},
                  {Name: "German", Code: "de", isEditable:true},
                  {Name: "Spanish", Code: "es", isEditable:false}
            ]);

/* Views */
// Book/Views.js
BookAttributesView = Marionette.ItemView.extend({
    el: "#BookAttributesBox",
    template: "#BookAttributesTemplate",
    bindings:
    {
        "#Title": "Title",
        "#AuthorName": "AuthorName",
        "#LanguageCode": {
            observe: "LanguageCode",
            selectOptions: {
                collection: languages,
                labelPath: "Name",
                valuePath: "Code"
            },
            update: function($el, val, model, options) {
                languages.each(function(language){
                    // Find parent.
                    var parent = $el.find("#LanguageReadable");
                    if (language.get("isEditable")){
                        parent = $el.find("#LanguageEditable");
                    }
                    
                    // Select correct value.
                    var selected = "";
                    if (language.get("Code") == val){
                        selected = ' selected="selected"';
                    }
                    
                    // Add option to optgroup.
                    parent.append("<option" + selected + ">" + language.get("Name") + "</option>");
                });
            }
        }
    },
    onRender: function () {
        this.stickit();
    }
});

/* Render view */
var book = new Book({ Title: "Dune", AuthorName: "Frank Herbert", LanguageCode: "de" });
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">
        <optgroup id="LanguageEditable" label="Editable langauges">
        <optgroup id="LanguageReadable" label="Readable languages">
    </select>
</div>
</script>

<!-- Views/Books/Edit.cshtml -->
<h1>Book edition</h1>
<h2>Attributes</h2>
<div id="BookAttributesBox"></div>

0

Источник Поделиться

user1387242 01 апр '15 в 15:34 2015-04-01 15:34

2015-04-01 15:34

Я заметил это в источнике;

https://github.com/NYTimes/backbone.stickit/blob/master/backbone.stickit.js#L650-658

// To define a select with optgroups, format selectOptions.collection as an object
// with an 'opt_labels' property, as in the following:
//
//     {
//       'opt_labels': ['Looney Tunes', 'Three Stooges'],
//       'Looney Tunes': [{id: 1, name: 'Bugs Bunny'}, {id: 2, name: 'Donald Duck'}],
//       'Three Stooges': [{id: 3, name : 'moe'}, {id: 4, name : 'larry'}, {id: 5, name : 'curly'}]
//     }
//

1

Источник Поделиться

user802291 15 июн '15 в 09:32 2015-06-15 09:32

2015-06-15 09:32

Другие вопросы по тегам javascript jquery twitter-bootstrap backbone.js backbone-stickit

[e-mail]
licensed under cc by-sa 3.0 with attribution

Answer 1

В документации по backbone.stickit я обнаружил, что мы можем переопределить метод обновления.

В привязку моего выбора я добавил следующий код:

update: function($el, val, model, options) {
LanguageChannel.data.languages.each(function(language){
    // Find parent.
    var parent = $el.find("#LanguageReadable");
    if (language.get("isEditable")){
        parent = $el.find("#LanguageEditable");
    }

    // Select correct value.
    var selected = "";
    if (language.get("Code") == val){
        selected = ' selected="selected"';
    }

    // Add option to optgroup.
    parent.append("<option" + selected + ">" + language.get("Name") + "</option>");
});}

Вот мое полное решение:

/* Models */
// Language/Models.js
Language = Backbone.Model.extend({});
LanguageCollection = Backbone.Collection.extend({
    model: Language
});
// Book/Models.js
Book = Backbone.Model.extend({});

languages = new LanguageCollection([
                  {Name: "English", Code: "en", isEditable:true},
                  {Name: "French", Code: "fr", isEditable:false},
                  {Name: "German", Code: "de", isEditable:true},
                  {Name: "Spanish", Code: "es", isEditable:false}
            ]);

/* Views */
// Book/Views.js
BookAttributesView = Marionette.ItemView.extend({
    el: "#BookAttributesBox",
    template: "#BookAttributesTemplate",
    bindings:
    {
        "#Title": "Title",
        "#AuthorName": "AuthorName",
        "#LanguageCode": {
            observe: "LanguageCode",
            selectOptions: {
                collection: languages,
                labelPath: "Name",
                valuePath: "Code"
            },
            update: function($el, val, model, options) {
                languages.each(function(language){
                    // Find parent.
                    var parent = $el.find("#LanguageReadable");
                    if (language.get("isEditable")){
                        parent = $el.find("#LanguageEditable");
                    }
                    
                    // Select correct value.
                    var selected = "";
                    if (language.get("Code") == val){
                        selected = ' selected="selected"';
                    }
                    
                    // Add option to optgroup.
                    parent.append("<option" + selected + ">" + language.get("Name") + "</option>");
                });
            }
        }
    },
    onRender: function () {
        this.stickit();
    }
});

/* Render view */
var book = new Book({ Title: "Dune", AuthorName: "Frank Herbert", LanguageCode: "de" });
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">
        <optgroup id="LanguageEditable" label="Editable langauges">
        <optgroup id="LanguageReadable" label="Readable languages">
    </select>
</div>
</script>

<!-- Views/Books/Edit.cshtml -->
<h1>Book edition</h1>
<h2>Attributes</h2>
<div id="BookAttributesBox"></div>

Answer 2

Я заметил это в источнике;

https://github.com/NYTimes/backbone.stickit/blob/master/backbone.stickit.js#L650-658

// To define a select with optgroups, format selectOptions.collection as an object
// with an 'opt_labels' property, as in the following:
//
//     {
//       'opt_labels': ['Looney Tunes', 'Three Stooges'],
//       'Looney Tunes': [{id: 1, name: 'Bugs Bunny'}, {id: 2, name: 'Donald Duck'}],
//       'Three Stooges': [{id: 3, name : 'moe'}, {id: 4, name : 'larry'}, {id: 5, name : 'curly'}]
//     }
//