骨干事件不'无法在Handlebars模板中工作

Backbone event doesn't work in a Handlebars template

本文关键字：Handlebars 工作事件更新时间：2023-09-26

我是骨干网的新手，我不明白为什么这个事件没有启动。我尝试了几种不同的方法，但并不是每种方法都有效。屏幕正在渲染。我正在用最新的科多瓦测试手机。

login.js

define(["jquery", "underscore", "kinvey", "handlebars",  "text", "text!templates/Login.html"],
function ($, _, Kinvey, Handlebars,  Text , source) {
 var Login = Backbone.View.extend({
    events: {
        "touchend #submit": "loggati",
        "touchend #signup": "goToSignup"
        },
    initialize: function () {
        console.log("init"); 
         /*  won't go this way either
            $('#submit').click(function(){
                alert('ciao');
            });
            $('#signup').click(function(){
                alert('ciao');
         */
            });
    },
    render: function (eventName) {
        console.log("rendering"); 
        var template = Handlebars.compile(source);
        var context = {color : "blue"};
        var html=template(context);
        $(document.body).html(html);
        return this;
    },
    goToSignup: function () {
        console.log("signup : fired"); 
        //stuff
    },
    loggati: function() {
        console.log("loggati : fired"); 
       //stuff
       }
});
return Login;
});

登录.html

 <div data-role="header" >
            <h1>Login</h1>
</div>
<div data-role="content">
                <div data-role="fieldcontain">
                    <input id= "username" placeholder="Username" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                        <input id= "password" placeholder="Password" value="" type="password">
                </div>
                <a data-role="button" id="submit">Sign In</a>
                <a data-role="button"  id="signup">Register</a>
</div>

router.js

define(["jquery", "underscore", "kinvey", "views/Login", "views/GetToken", "views/Game",   "views/SignupPage", "views/Home", "views/Settings", "views/Rules"],
    function ($, _, Kinvey, Login, GetToken, Game, SignupPage, Home, Settings, Rules) {
    var Router= Backbone.Router.extend({
        routes: {
            "login": "login",
            "getToken": "getToken",
            "game": "game",
            "signupPage": "signupPage",
            "home": "home",
            "settings": "settings",
            "rules": "rules"
        },
        initialize: function () {
            console.log('initialize');
            this.currentView = undefined;
            var page;
            if( window.localStorage.getItem("username") && window.localStorage.getItem("username").length > 0)
            {       
                console.log('trovato utente loggato');
                document.getElementById("nomeSet").innerHTML = window.localStorage.getItem("username");
                document.getElementById("tokenSet").innersHTML = window.localStorage.getItem("token");
                page = new Home();
            }
            else 
                page = new Login();
            this.changePage(page);
            },
        login: function () {
                var page = new Login();
                this.changePage(page);
              },
        getToken: function () {
            var page = new GetToken({
            });
            this.changePage(page);
          },
        game: function () {
            var page = new Game({
            });
            this.changePage(page);
          },
        signupPage: function () {
            var page = new SignupPage({
            });
            this.changePage(page);
          },
        home: function () {
            var page = new Home({
            });
            this.changePage(page);
          },
        settings: function () {
            var page = new Settings({
            });
            this.changePage(page);
          },
        rules: function () {
            var page = new Rules({
            });
            this.changePage(page);
          },
        changePage: function (page) {
        console.log('changepage '+page);
            if(this.currentView) {
               this.currentView.remove();
               this.currentView.off();
                }
            this.currentView = page;
            page.render();
            }
    });
    return Router;
});

使用事件委派将主干视图的事件附加到其el。每个视图都有一个el，如果您自己没有指定，那么您的视图将使用一个空的<div>作为其el。您没有在任何位置指定el，因此您的视图将为创建<div>作为el。render方法通常如下所示：

render: function() {
    var html = html_from_some_template;
    this.$el.html(html);
    return this;
}

但你说的是：

$(document.body).html(html);

以添加HTML。您的视图的el不是body，因此您的任何事件都不起作用。

一个快速的解决方案是添加：

el: 'body'

到您的视图定义，然后将render更改为：

this.$el.html(html);