Question

这似乎是一个热门话题，然而，在尝试了5个不同答案的几个建议解决方案后，我仍然无法做到正确。我有一个简单的表单，将两个字段的输入附加到屏幕上。＆＃34;添加＆＃34;按钮工作一次（显示输入的数据）并且在第二次点击时不触发其事件（我检查过 - 事件＆＃39; s render不再执行）。大多数建议的修复都涉及在视图末尾添加this.delegateEvents()。 render方法 - 对我的情况没有任何影响，也许我做得不对。我认为我所做的只是简单地解决其他人不得不解决的问题。

我意识到整个事情可以更好/不同地构建，我只是按照其中一个教程而陷入第二次点击问题。我只想知道：1。我的代码到底是什么导致了这个bug。 2.如何克服它，最好不要重写整个事物。

谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Name List</title>
    <link rel="stylesheet" href="name_book.css"/>
</head>
<body>

<div class="container"></div>     
    <div class="div_people"></div>
    <hr>
    <div class="div_inputs"></div>
</div>


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

<!--template for the inputs-->
<script type="text/template" id="inputs">
    Please enter name and city below:<br>
    <form id="add_person_form" class="add_person_form">
    <div id="div_input_name" class="input_name" style="float:left"><input id="input_name" type="text" /></div>
    <div class="div_input_city" style="float:left"><input id="input_city" type="text" /></div>
    <a href="#/add" class="input_submit_submit">Add</a>
    </form>
</script>

<!--template for the screen output row-->
<script type="text/template" id="person_info">
    <span class="person_name"><%= person_name %></span>
    <span class=spacer></span>
    <span class="person_city"><%= person_city %></span>
    <br>
</script>

<script>
    //class constructor
    var Router = Backbone.Router.extend({
        routes: {
            '': 'home',
            'add': 'addPerson'
        }
    });

    var router = new Router();

    var InputsList = Backbone.View.extend({
        el: '.div_inputs',
        render: function() {
            var template = _.template($('#inputs').html(), {});
            this.$el.append(template);
        }
    });

    var inputsList = new InputsList();
    router.on('route:home', function() {
        inputsList.render();
    });         

    var PeopleList = Backbone.View.extend({
        el: '.div_people',
        render: function() {        
            var template_person = _.template( $("#person_info").html(), {person_name: $("#input_name").val(), person_city: $("#input_name").val()} );
            this.$el.append(template_person);
        }
    });

    var peopleList = new PeopleList();

    router.on('route:addPerson', function() {
        peopleList.render();
    });     

    Backbone.history.start();
</script>
</body>
</html>

Answer 1

如果路线#/add没有改变，则没有任何东西可以触发改变。如果您希望每次点击都有通知，则需要收听点击事件。

Backbone.View.extend({
    events : {
        "click .input_submit_submit" : "myCallbackOnClick"
    },
    myCallbackOnClick : function(ev) {
        // <a> i was clicked
        ev.preventDefault();
        this.someOptionToRenderDifferently = true;
        peopleList.render();
    }
});

Backbone.js：为什么不是第二次触发事件（delegateEvents没有帮助）

1 个答案: