Question

我已经检查了this post，and this one，and this one以及其他众多解决方案，但根本没有任何解决方案可以帮助我。我要做的就是用一个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');
    }
});

除了用<div>包装我的html之外，这正是我想要的第一个渲染。但是，如果我再次调用我的渲染函数，则所有事件都不起作用。所以根据我的所有读数，我认为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

这增加了仅数组中的第一项，即使在第一次渲染时事件也不起作用。

请恢复我的理智人，我不知道还有什么可做的。

重新渲染后的骨干视图丢失事件

0 个答案: