Question

我正在尝试用骨干进行简单的视图测试。我从事件开始，但没有人开火。为什么？我已经使用骨干等其他东西制作了没有问题。谢谢你的时间。我的主干定义来自-> this source <-

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>

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

Answer 1

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

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

但Backbone从_super.call

挂钩事件（并调用initialize）

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而不是类

export var MyView = Backbone.View.extend

在codeplex上的typescript项目中出现问题1098

Answer 2

使用ctor中的setElement函数而不是el object。

Answer 3

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

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

使用它来实现正确的功能

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

在设置Collection属性时，您必须为model做同样的事情。否则Backbone将使用默认的Backbone.Model类型

Answer 4

尝试将 el 设置为“#Menu”

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

        super(viewOptions);
    }

    el = "#Menu";

Answer 5

试试这个。基本上，所有事件和任何初步实例化/预处理都在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");
       }
    }
}

Answer 6

试试吧。

file：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; 
});

file：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 ' );    
   }
}

打字稿骨干查看事件不会触发

6 个答案:

file：requirejsConfig.ts

file：test.ts