类型记录Marionette UI对象

Question

我尝试在类型记录中实现一个Marionette ItemView，并希望使用UI对象将对UI元素的调用简化为在Marionette文档中描述。

我做了以下示例来简化它：

/// <reference path="scripts/typings/marionette/marionette.d.ts" />

interface settings {
    el: any
    template: Function
}

class myApp extends Marionette.ItemView<Backbone.Model> {
    constructor(options: settings) {
        super(options);
    }

    ui = {
        hello: '.hello'
    }

    events() {
        return {
            'click @ui.hello': 'heyWorld'
        }
    }

    heyWorld() {
        console.log("Hey heyWorld!!!!");
    }
}

window.onload = () => {
    var app = new myApp({
        el: document.getElementById('content'),
        template: (data) => {
            return '<div class="hello"><p>Hej world - click me</p></div>';
        }
    });
    app.render();
};

它返回“未定义的TypeError:无法读取未定义的”的属性'hello‘。

如果我将UI对象更改为下面的内容，它就会开始工作，但这似乎是一种让它工作起来的有点麻烦的方式：

get ui() {
        return {
            hello: '.hello'
        }
    }

    set ui(value) { 
        // somehow marionette want to set this.ui to an empty object 
    }

以前有人遇到过这个问题吗？有谁能找到一种很好的方法来实现Marionette对象，从而避免尴尬的get/set UI代码？

Answer 1

解决办法很简单。只需传递带有options对象的ui对象，如下所示：

class myApp extends Marionette.ItemView<Backbone.Model> {
    constructor(options: Backbone.ViewOptions<Backbone.Model>) {
        this.ui = {
            hello: '.hello'
        }
        super(options);
    }

    events() {
        return {
            'click @ui.hello': 'heyWorld'
        }
    }

    heyWorld() {
        console.log("Hey heyWorld!!!!");
    }
}