0
backbone.js, 을 사용하여 버튼에 함수를 바인딩하려고하는데 버튼에 이벤트가 호출되지 않습니다. 내가 ExpensesAddView 에있는 버튼에 ToggleDone 방법을 결합하려고하지만 불려 오지 못한함수가 backbone.js에서 호출되지 않습니다.
<!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>
:
$(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입니다 .
저는 backbone.js에 새로 왔습니다.
도움을 주셔서 감사 드리며 필요한 변경 작업을 수행했습니다. –