3

我正在尝试制作一个简单的视图来测试骨干。我从事件开始，但没有人开火。为什么 ？我已经用主干线制作了其他东西，比如路由等，没有问题。谢谢你的时间。我的主干定义来自->这个来源<-

module Views {
export class MenuView extends Backbone.View {
    constructor(viewOptions?: Backbone.ViewOptions) {

        super(viewOptions);
    }

    el = document.body;
    events = {
        "click #Btn-Start": "navigate",
        "click #Btn-Software": "navigate",
        "click #Btn-Anderes": "navigate",
        "click #Btn-Impressum": "navigate"
    };

    initialize() {
        console.log("initialize"); // fire
    }

    render() {
        console.log("render"); // not fire
    }

    navigate() {
        console.log("navigate"); // not fire
    }
}

}

<body>
    <div id="Menu">
        <div id="Btn-Start"></div>
        <div id="Btn-Software"></div>
        <div id="Btn-Anderes"></div>
        <div id="Btn-Impressum"></div>
    </div>
<body>

编辑：尝试使用路由（名称：字符串，回调：函数）和路由作为对象的路由。它似乎与函数引用一起工作，但不是路由对象中的字符串。也许有一种方法可以在这样的视图中声明它。

4

6 回答 6

2

Backbone 和 typescript 构造函数之间的初始化序列存在问题。构造函数生成为

_super.call(this, attributes); this.events = { "click a.back": "back", "click a.changeDate": "changeDate" }; >

但是 Backbone 从 _super.call 挂钩事件（和调用初始化）

var View = Backbone.View = function(options) {
   this.cid = _.uniqueId('view');
   this._configure(options || {});
   this._ensureElement();
   this.initialize.apply(this, arguments);
   this.delegateEvents();
};

Backbone 期望 View 对象在调用构造函数时完全初始化，但事实并非如此。

到目前为止我发现的最好的解决方案是使用 Backbone.extend 而不是 class

export var MyView = Backbone.View.extend

Codeplex 上的 typescript 项目中的问题 1098

于 2013-10-18T13:59:48.490 回答
2

所有答案都不是正确答案。

你需要使用getter，因为这个设置为原型，而通常的属性是在调用父 ctor之后设置的——太晚了。

将其用于正确的功能

export class View extends Backbone.View {
    get events() { 
        return { 
            "click .button" : "myEvent"
        }
    }
}

设置属性Collection时也必须这样做。model否则 Backbone 将使用默认Backbone.Model类型

于 2013-09-18T22:13:00.467 回答
1

使用 ctor 内部的 setElement 函数而不是 el 对象。

于 2013-02-15T15:07:50.067 回答
0

尝试这个。基本上，所有的事件和任何初步的实例化/预处理都会Constructor代替。

render()没有触发的原因navigate()是事件没有正确连接。

module Views {
    export class MenuView extends Backbone.View {
        constructor(viewOptions?: Backbone.ViewOptions) {
            super(viewOptions);

            // Any initialization goes in the constructor.
            this.el = document.body;
            this.events = {
                 "click #Btn-Start": "navigate",
                 "click #Btn-Software": "navigate",
                 "click #Btn-Anderes": "navigate",
                 "click #Btn-Impressum": "navigate"
            };

            // Precompile and cache the template.
            this.template = _.template($('#template').html());
            console.log("initialize");
       }
       render() {
            console.log("render");
            return this;
       }
       navigate() {
            console.log("navigate");
       }
    }
}
于 2013-02-15T20:04:09.193 回答
0

尝试将您的el设置为“#Menu”

module Views {
export class MenuView extends Backbone.View {
    constructor(viewOptions?: Backbone.ViewOptions) {

        super(viewOptions);
    }

    el = "#Menu";
于 2013-02-15T14:11:19.143 回答
0

试试看。

文件：requirejsConfig.ts

require.config({
    paths: {
        jquery: 'bower_components/jquery/dist/jquery',
        underscore: 'bower_components/underscore/underscore',
        backbone: 'bower_components/backbone/backbone',
        test: 'test'
    }
});

require(['test'], function(Test: any){
    new Test.test; 
});

文件：test.ts

/// <reference path="../typings/tsd.d.ts" />

import Backbone = require('backbone');
import $ = require( 'jquery');


export class Test extends Backbone.View<Backbone.Model> {
   events(): Backbone.EventsHash
    { 
        return { 
            'click': 'showResult'            
        }
    }
    constructor( options?: any )
    {
        super(options);
        this.setElement( $( '.test-el' ), true );        
    }    
   protected showResult(): void 
   {
        console.log( 'show result ' );    
   }
}
于 2016-10-11T23:44:14.197 回答