Backbone Marionette 布局的 UI 哈希问题

Question

在下面的Layout 中，我添加了一个CollectionView 以在onRender 中显示一个SELECT 列表。紧接着，我使用 ui 哈希来启用或禁用视图中的所有控件。这不适用于new App.View.Categories 生成的 SELECT。

应该吗？或者 UI 哈希在 Layout 内的 Regions 上不起作用？

App.View.UploadFile = Backbone.Marionette.Layout.extend({
    template: '#upload-file-template',
    regions:{
        category: 'td:nth-child(4)'
    },
    ui:{
        inputs: 'textarea, select, .save'
    },
    onRender: function(){
        this.category.show(
            new App.View.Categories({
                collection: App.collection.categories
            }) // generates the SELECT list
        );

        console.log(this.ui.inputs); // Length 2. Missing select.
        console.log(this.$('textarea, select, .save')); // Length 3

        this.ui.inputs.prop(
            'disabled', (this.model.get('upload_status')!='staged')
        );
    }
});

Answer 1

这应该按照您期望的方式工作。 Marionette 源码中有问题的代码在这里：https://github.com/marionettejs/backbone.marionette/blob/master/src/marionette.itemview.js#L49-L51

对bindUIElements() 的调用是将ui 哈希转换为jQuery 选择器对象，它在onRender 方法被调用之前被调用。

您是否看到错误？还是选择器只是什么都不返回，对元素没有影响？

---

更新：

啊！当然......我没有足够关注你的代码。您是正确的，因为 UI 元素选择器发生在您将子视图添加到区域之前。我以前从未遇到过这种情况……但这似乎是我们想要修复/支持的事情。

目前，我建议的最佳解决方法是调用“this.bindUIElements();”在 onRender 方法的最后。这将强制 ui 元素重新绑定到选择器。

我还将在 github 问题列表中添加一个问题，以寻找更好的解决方案。我不知道我什么时候才能解决这个问题，但这至少会在要修复的问题列表中列出。