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（{...}）;）中当我的模型更改高分时，我希望发送元素被隐藏，但是当我执行上述操作时，没有任何更改。 console.log（elem）给我元素作为对象[div.send]，它是正确的元素，但它不会被隐藏。

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

Answer 1

你有多个元素与＆＃39;发送＆＃39;这个视图上下文中的类？如果是这样，您可能只需要相对于目标元素消除歧义。如果您了解事件本身的目标与您想要操作的元素之间的关系，您可以通过以下方式访问它：

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'));        
    }
});

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

2 个答案: