Question

我正在尝试使用backbone.js将函数绑定到按钮，但是按钮上没有调用该事件。

$(function () {

    // expense model
    // ----------

    // 
    var ExpenseModel = Backbone.Model.extend({

        // Default attributes for the todo item.
        defaults: function () {
            return {
                month: "JAN",
                category: Todos.nextOrder(),
                amount: 0,
                description: "empty string"
            };
        },   

    });

    var ExpensesCollection = Backbone.Collection.extend({
        model: ExpenseModel,
        localStorage: new Backbone.LocalStorage("todos-backbone")    
    });

    var ExpensesAddView = Backbone.View.extend({
        el: $(".add-content"),
        // The DOM events specific to an item.
        events: {
            "click .add-button": "ToggleDone"

        },
        ToggleDone: function () {
            this.$el.slideToggle();
            alert("done");
        },

    });
    var ExpensesAppView = Backbone.View.extend({
        el: $(".main-Page"),
        // The DOM events specific to an item.
        initialize: function () {
            var addView = new ExpensesAddView({
                model: ExpenseModel
            });
        }
    });
    var App = new ExpensesAppView;
});

这是相应的HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>



  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">

  <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="styles/codiqa.ext.css">

  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  <script src="lib/codiqa.ext.js"></script>
  <script src="lib/jquery.js"></script>
  <script src="lib/underscore.js"></script>
  <script src="lib/backbone.js"></script>
  <script src="lib/backbone.localStorage.js"></script>
  <script src="app/app.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="mainPage" class="main-Page">
    <div id="expense-page-header-id" data-theme="a" data-role="header" class="expense-page-header">
        <h3 id="header-text-id" class="header-text">
            Header
        </h3>
    </div>
    <div data-role="content">
        <a id="add-button-id" data-role="button" data-inline="true" 
        href="#mainPage" data-icon="plus" data-iconpos="notext" class="add-button">
        </a>
        <div class="add-content">
            <div data-role="fieldcontain" class="category-input">
                <input name="" id="category-input-id" placeholder="category" value=""
                type="text" data-mini="true">
            </div>
            <div data-role="fieldcontain" class="amount-input">
                <input name="" id="amount-input-id" placeholder="amount" value="" type="text"
                data-mini="true">
            </div>
            <div data-role="fieldcontain" class="description-input">
                <input name="" id="description-input-id" placeholder="description" value=""
                type="text" data-mini="true">
            </div>
            <a id="reset-id" data-role="button" data-inline="true" href="#" data-icon="delete"
            data-iconpos="notext" class="reset">
            </a>
            <a id="done-id" data-role="button" data-inline="true" href="#" data-icon="check"
            data-iconpos="notext" class="done">
            </a>
        </div>

    </div>
</div>
</body>
</html>

我正在尝试将ToggleDone方法绑定到ExpensesAddView中的按钮但它没有被调用。

我对backbone.js很新。

Answer 1

您的观看次数为div.add-content，观看中的事件仅触发视图内部（儿童）的元素。

button.add-button不是div.add-content的孩子 - 它是div.add-content的兄弟，因此它上面的事件永远不会冒泡到视图中，因此永远不会触发功能

函数没有在backbone.js中调用

1 个答案: