淘汰赛绑定问题

时间:2014-07-27 00:43:21

标签: c# javascript asp.net asp.net-mvc knockout.js

我正在使用带有knockout的ASP.NET MVC来构建一个日历,其中包含当用户点击事件时,将事件数据发送到c#函数的Ajax请求。 如果用户在单击add href之前未登录,以及添加href以调用正确的函数,我将很难获得错误div。

正在从ASP.NET视图

填充AddEvent中的参数

这是我的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">&nbsp;</span></td>
                <td><span class="date">&nbsp;</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">&nbsp;</span></td>
                <td><span class="date">&nbsp;</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());

现在我正在收到&#34;未捕获的TypeError:undefined不是一个函数&#34;无处不在调用javascript函数。

1 个答案:

答案 0 :(得分:1)

我继续前进,并在http://jsfiddle.net/RKD9J/创建了一个小提琴。

关键更改是使用敲击数据绑定处理程序为click事件添加Concert。

<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,而不是在您的视图模型上声明。