0

私がしたいこと：

内部にオプション タグを含む選択ドロップダウンをレンダリングし、ユーザーがドロップダウンでオプションを選択すると、新しく選択されたモデルを取得し、それを処理します。

問題：

CompositeView を介して呼び出された ItemView で変更イベントをトリガーするのに苦労しています。

何らかの理由で CompositeView:change (ログ: ホーリー モーゼス) がトリガーされていますが、選択したモデルが得られないため、あまり役に立ちません。

たくさんのことを試しましたが、実際には何も機能しませんでした。

どんな助けでも大歓迎です！

コード：

Configurator.module('Views.Ringsizes', function(Views, Configurator, Backbone, Marionette, $, _) {

    Views.DropdownItem = Marionette.ItemView.extend({
        tagName: 'option',
        template: "#dropdown-item",


        modelEvents: {
            'change': 'modelChanged'
        },

        onRender: function(){
            console.log('tnt');
            this.$el = this.$el.children();
            this.setElement(this.$el);                
        },

        modelChanged: function(model) {

            console.log("holy mary");

        }            
    });

    Views.DropdownView = Marionette.CompositeView.extend({
        template: "#dropdown-collection",
        className: 'configurator-ringsizes-chooser',
        itemView: Views.DropdownItem,
        itemViewContainer: '.product_detail_ring_sizes',

        events: {
            "change": "modelChanged"
        },
        initialEvents: function(){},
        initialize: function(){
            console.log(this.model);
            this.collection = new Backbone.Collection(this.model.getRingsizes());

        },
        modelChanged: function(model) {
            console.log("holy moses");
        }

    });

    Views.List = Marionette.CollectionView.extend({
        className: 'configurator-ringsizes',
        itemView: Views.DropdownView
    });
});

テンプレートコード: (必要な場合)

<script type="text/template" id="dropdown-item">
  <option value="<@- code @>" <@ if(current) { @> selected="selected" <@}@> ><@- name @>    </option>
</script>

<script type="text/template" id="dropdown-collection">
   <div class="accordionContent accordionContent_ringsizes">
     <div class="configurator-ringsizes-chooser-ringsizes-region">
        <select class="product_detail_ring_sizes"></select>
     </div>
   </div>
</script>
4

2 に答える 2

0

さて、私はついにこれを機能させました。

これを data- 属性に頼らなければならないことに少しがっかりしていますが、これが私が見つけた唯一の方法です。もう十分に時間がかかりました:)

これが私が今それをした方法です：

テンプレート コード:

<script type="text/template" id="dropdown-item">
  <option data-cid="<@- cid @>" value="<@- code @>" <@ if(current) { @> selected="selected" <@}@> ><@- name @></option>
</script>

<script type="text/template" id="dropdown-collection">
    <div class="configurator-ringsizes-chooser-ringsizes-region">
      <select class="product_detail_ring_sizes"></select>
    </div>
</script>

コード：

Configurator.module('Views.Ringsizes', function(Views, Configurator, Backbone, Marionette, $, _) {

    Views.DropdownItem = Marionette.ItemView.extend({
        tagName: 'option',
        template: "#dropdown-item",

        serializeData: function() {

            var data = {
                cid: this.model.cid,
                code: this.model.get('code'),
                name: this.model.get('name'),
                current: this.model.get('current')
            };

            return data;
        },            
        onRender: function(){
            this.$el = this.$el.children();
            this.setElement(this.$el);                
        }        
    });

    Views.DropdownView = Marionette.CompositeView.extend({
        template: "#dropdown-collection",
        className: 'configurator-ringsizes-chooser',
        itemView: Views.DropdownItem,
        itemViewContainer: '.product_detail_ring_sizes',

        events: {
            "change select": "modelChanged"
        },

        initialEvents: function(){},

        initialize: function(){
            this.collection = new Backbone.Collection(this.model.getRingsizes());
        },

        modelChanged: function(e) {

            var cid = $(e.currentTarget+"option:selected").data('cid');

            var currentModel = this.collection.find(function(elem) {
                return elem.get('current');
            });

            var model = this.collection.find(function(elem) {
                return elem.cid === cid;
            });

            currentModel.set({
                current: false
            });

            model.set({
                current: true
            });

            // AND here i'm doing my stuff, getting the overall model through this.model, the collection of options through this.collection and the currently selected model through currentModel.
        }         

    });

    Views.List = Marionette.CollectionView.extend({
        className: 'configurator-ringsizes',
        itemView: Views.DropdownView,
        model: this.model
    });
});
于 2013-03-12T18:14:55.847 に答える
0

「変更」イベントは、オプションを選択してもトリガーされません。代わりに、選択したオプションを変更すると、選択時に発生します (そのため、複合ビューでトリガーされます)。

したがって、itemView でこれを使用する必要があります。

events: {
    'click' : 'modelChanged'
}
于 2013-03-12T15:40:18.260 に答える