如何从Marionette事件处理程序中选择元素？

Question

编辑：添加了更多代码

我正在听模型上的事件，如下所示：（这是我的观点）

var view = Marionette.ItemView.extend({

    tagName: 'tr',
    template: viewtemplate,

    modelEvents: {
        "change:highscore": "highchange"
    },

    highchange: function (model) {
        var elem = this.$('.send');
        console.log(elem);
        elem.hide();
        this.render();
    }
});

和我的模板：

<td class="cusername">{{username}}</td>
<td class="highscore">

<div class="box">
    <button class="send"></button>
        <span>Send</span>
    </button>
</div>

（这在我的Marionette.ItemView.extend（{...}）;内部）
当我的模型更改高分时，我希望隐藏send元素，但是当我执行上述操作时，没有任何变化。 console.log（elem）给我该元素作为一个object [div.send]，它是正确的元素，但是不会被隐藏。

这与木偶的生命周期有关吗？ 如何更改由于模型上的事件而隐藏的元素？

Answer 1

在此视图上下文中，“ send”类是否包含多个元素？ 如果是这样，您可能只需要相对于目标元素进行歧义消除。 如果您了解事件本身的目标和您要操作的元素之间的关系，则可以通过以下方式进行访问：

highchange: function (e) {
    var elem = $(e.target).find('.send'); // if .send is a child element
    var elem = $(e.target).closest('.send'); // if .send is a parent element
}

Answer 2

发生这种情况是因为在隐藏元素后重新渲染了整个视图。 您可以在调用render函数后隐藏元素。 渲染操作非常昂贵，建议您手动刷新视图：

var View = Marionette.ItemView.extend({

    tagName: 'tr',

    template: viewtemplate,

    ui: {
        $username: '.username',
        $send: '.send'
    },

    modelEvents: {
        'change': 'onChangeModel'
    },

    onChangeModel: function (model) {
        if (model.hasChanged('highscore')) this.ui.$send.hide();

        if (model.hasChanged('username')) this.ui.$username.text(model.get('username'));        
    }
});