打字稿 Marionette UI 对象

Question

我尝试在 Typescript 中实现 Marionette ItemView，并希望使用 UI 对象来简化对 UI 元素的调用，如 described in the Marionette documentation .

我做了下面的例子来简化它：

/// <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();
};

哪个returns"Uncaught TypeError: Cannot read property 'hello' of undefined"

如果我将 UI 对象更改为以下内容，它就会开始工作，但让它工作的方式似乎有点老套：

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

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

有人运行以前处理过这个问题吗？任何人都有一个很好的方法来实现 Marionette UI 对象，避免笨拙的 get/set UI 代码？

Answer 1

解决方案很简单ui。只需要传递带有选项对象的 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!!!!");
    }
}

打字稿 Marionette UI 对象

Typescript Marionette UI object

typescript

marionette