1

この投稿、これ、これ、およびその他多数を確認しましたが、解決策はまったく役に立たないようです。私がやろうとしているのは、ビューの内容を html の配列に置き換えることだけです。配列内の各要素は、アンダースコア テンプレート エンジンを使用して作成されます。これが私のコードです：

テンプレート: 

    <script type="text/template" id="radioItemTemplate">
        <li>
            <div class="button price <% if(enabled){%>enabled<%}%>">$<%=price%></div>
            <div class="title name"><%=name%></div>
        </li>
    </script>

Javascript: 

iHateThisView = Backbone.View.extend({
    template: _.template($("#radioItemTemplate").html()),

    events:{
        "click .price": "_onRadioItemClick"
    },

    radioItems: null,
    radioItem: null,

    initialize: function (options) {
        this.radioItems = options.radioItems;
        this.radioItem = options.radioItem;
    },

    render: function () {
        trace("rendering");
        var radioItems = this.radioItems.first(3);
        var activeRadioItem = this.radioItem.get('name');
        var result = [];
        var scope = this;
        _.forEach(radioItems, function (radioItem) {
            var option = {
                name: radioItem.get('name'),
                price: radioItem.get('price'),
                enabled: activeRadioItem == radioItem.get('name')
            };
            result.push(scope.template(option));
        });

        //THE TRICKY ZONE -START

        this.$el.html(result);

        //THE TRICKY ZONE -END
        return this;
    },

    _onRadioItemClick: function (event) {
        $el = this.$el;
        var clickedName = $el.find('price');
        console.log('clickedName');
    }
});

私のhtmlをこれでラップすることを除けば<div>、最初のレンダリングで私が望むことを正確に行います。ただし、レンダリング関数を再度呼び出すと、どのイベントも機能しません。したがって、すべての測定値に基づいてthis.delegateEvents()、イベントの損失を修正する必要があると考えたので、これを試しました：

//THE TRICKY ZONE -START

this.$el.html(result);
this.delegateEvents();

//THE TRICKY ZONE -END

私が言えることから、何もしませんでした。radioItems をクリックしたときの最初のレンダリングでは、 を取得しますconsole.logが、再レンダリング後ではありません

それで、私はこれをしなければならないかもしれないと読みました：

//THE TRICKY ZONE -START

this.$el.html(result);
this.delegateEvents(this.events);

//THE TRICKY ZONE -END

これも何もしませんでした。

そこで、別の方法を試しました：

//THE TRICKY ZONE -START

this.setElement(result);
this.delegateEvents();   //with and without this line

//THE TRICKY ZONE -END

これにより、配列の最初のアイテムのみが追加され、イベントは最初のレンダリングでも機能しませんでした。

正気を取り戻してください、他にやることはありません。

4

0 に答える 0