0

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を初めて使用します。

4

1 に答える 1