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>

編集：route（名前：文字列、コールバック：関数）とルートをオブジェクトとして使用してルートを試行しました。関数参照では機能するようですが、routesオブジェクトの文字列としては機能しません。たぶん、このようなビューでそれを宣言する方法があります。

4

6 に答える 6

2

すべての答えが正解ではありません。

getterこれはプロトタイプに設定されているのに対し、通常のプロパティは親ctorが呼び出された後に設定されるため、を使用する必要があります。これでは遅すぎます。

適切な機能のためにこれを使用してください

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

プロパティCollectionを設定するときに行う必要があるのと同じです。modelそれ以外の場合、バックボーンはデフォルトのBackbone.Modelタイプを使用します

于 2013-09-18T22:13:00.467 に答える
2

Backboneとtypescriptコンストラクターの間の初期化シーケンスに問題があります。コンストラクターは次のように生成されます

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

しかし、バックボーンは_super.callからイベントをフックします（そして初期化を呼び出します）

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

バックボーンは、コンストラクターが呼び出されるまでにViewオブジェクトが完全に初期化されることを想定していますが、そうではありません。

私がこれまでに見つけた最善の解決策は、クラスの代わりにBackbone.extendを使用することです。

export var MyView = Backbone.View.extend

codeplexのtypescriptプロジェクトで1098を発行

于 2013-10-18T13:59:48.490 に答える
1

elオブジェクトの代わりに、ctor内でsetElement関数を使用します。

于 2013-02-15T15:07:50.067 に答える
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

これを試して。基本的に、すべてのイベントと予備的なインスタンス化/前処理が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

それを試してみてください。

ファイル：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 に答える