敲除绑定问题
本文关键字：问题 绑定 | 更新日期: 2023-09-27 18:15:08
我使用的是ASP。使用knockout构建带有事件的日历，当用户单击事件时，会将带有事件数据的Ajax请求发送给c#函数。我有一个艰难的时间得到错误div显示，如果用户没有登录之前点击添加href，以及添加href调用适当的函数。
AddEvent中的参数是从ASP中填充的。网查看
这是我的HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/Hudl/Content/styles.css" />
<link rel="stylesheet" href="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.css" />
<script src="/Hudl/Scripts/knockout-3.1.0.js"></script>
<script src="/Hudl/Scripts/jquery.min.js"></script>
<script src="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.js"></script>
<script src="/Hudl/Scripts/Google/Google.js"></script>
<meta name="viewport" content="width=device-width" />
<title>Concert</title>
</head>
<body>
<div><img src="/Hudl/Content/Images/curtains_closing.jpg" width="100%" height="200em"></div>
<div class="title">
7 2014
<span id="signinButton">
<span class="g-signin"
data-callback="signinCallback"
data-clientid="1071645370589-acdsg7rjbsk7dn5lecfbk83k9uh8fnaa.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
</div>
<div data-bind="visible: displayError" id="error" title="Must Login">
<p>You must login to Google+ before you can add a concert to your calendar.</p>
</div>
<table border="1">
<tr><th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th></tr>
<tr>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><div class="date">1</div></td>
<td><div class="date">2</div></td>
<td><div class="date">3</div></td>
<td><div class="date">4</div></td>
<td><div class="date">5</div></td>
</tr>
<tr>
<td><div class="date">6</div></td>
<td><div class="date">7</div></td>
<td><div class="date">8</div></td>
<td><div class="date">9</div></td>
<td><div class="date">10</div></td>
<td><div class="date">11</div></td>
<td><div class="date">12</div></td>
</tr>
<tr>
<td><div class="date">13</div></td>
<td><div class="date">14
<div>
<a href="javascript:AddEvent('4', 'Paul McCartney', 'Can You Believe It?', '07/14/2014', '18:30', '23:30:00')">18:30</a>
Paul McCartney
</div>
</div>
</td>
<td><div class="date">15</div></td>
<td><div class="date">16</div></td>
<td><div class="date">17</div></td>
<td><div class="date">18
<div>
<a href="javascript:AddEvent('9', 'Midwest Cup Show Choir Invitational', 'High school show choirs battling for the championship!', '07/18/2014', '13:30', '22:00:00')">13:30</a>
Midwest Cup Show Choir Invitational
</div>
</div>
</td>
<td><div class="date">19
<div>
<a href="javascript:AddEvent('8', 'Marc-Andre Hamelin', 'Classical piano styles of the new era.', '07/19/2014', '20:00', '23:30:00')">20:00</a>
Marc-Andre Hamelin
</div>
</div>
</td>
</tr>
<tr>
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22
<div>
<a href="javascript:AddEvent('3', 'Edison', 'Family friendly.', '07/22/2014', '17:00', '20:00:00')">17:00</a>
Edison
</div>
<div>
<a href="javascript:AddEvent('6', 'Tracy Byrd', 'Kick off your shoes come on in!', '07/22/2014', '18:00', '23:00:00')">18:00</a>
Tracy Byrd
</div>
</div>
</td>
<td><div class="date">23</div></td>
<td><div class="date">24
<div>
<a href="javascript:AddEvent('2', 'Imagine Dragon', 'Hipsters Paradise.', '07/24/2014', '18:45', '23:00:00')">18:45</a>
Imagine Dragon
</div>
<div>
<a href="javascript:AddEvent('7', 'Blue Man Group', 'Vegas in Nebraska.', '07/24/2014', '20:00', '23:30:00')">20:00</a>
Blue Man Group
</div>
</div>
</td>
<td><div class="date">25</div></td>
<td><div class="date">26</div></td>
</tr>
<tr>
<td><div class="date">27</div></td>
<td><div class="date">28</div></td>
<td><div class="date">29</div></td>
<td><div class="date">30
<div><a href="javascript:AddEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00')">18:30</a>
Powerman 5000
</div>
</div>
</td>
<td>
<div class="date">31</div>
</td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
this.authResult = authResult;
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
console.log('Sign-in state: ' + authResult['error']);
}
};
</script>
<script>
$(function () {
$("#error").dialog();
});
</script>
</body>
</html>
和我的js
function ViewModel() {
var self = this;
self.displayError = ko.observable(false);
self.addEvent = function(id, artist, description, date, startTime, endTime) {
if (!authResult['status']['signed_in']) {
self.displayError = true;
self.errorMessage = 'You are not logged-in to your google account.';
} else {
XMLHttpRequest.open("Get", "https://www.googleapis.com/calendar/v3/users/me/calendarList", true);
//make google api call to get list of calendars based on authResult value in callback function
//if api call to get calendars is successful, use authResult, concert, and calendarID to insert event into to make a new google api call to insert event
}
};
};
ko.applyBindings(new ViewModel());
现在我收到"Uncaught TypeError: undefined is not a function"无处不在的javascript函数被调用
我在http://jsfiddle.net/RKD9J/上创建了一个小提琴。
关键更改是为click事件使用knockout数据绑定处理程序来添加音乐会。
<a href="javascript:AddEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00')">18:30</a>Powerman 5000
<a href="#" data-bind="click: function(data, event) { addEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00') }" >18:30</a> Powerman 5000
按照下面的说明向函数传递参数http://knockoutjs.com/documentation/click-binding.html
您的javascript:AddEvent语句假设在顶部(窗口)级别声明了AddEvent，而不是在您的视图模型上。