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

返回＆＃34; Uncaught TypeError：无法读取属性＆＃39; hello＆＃39;未定义＆＃34;

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

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

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

以前有人遇到过这个问题吗？有没有人有一个很好的方法来实现Marionette UI对象，避免尴尬的获取/设置UI代码？

Answer 1

解决方案非常简单。只需使用选项对象传递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!!!!");
    }
}

打字稿木偶UI对象

1 个答案: