Question

我正在查看Forerunner待办教程（http://www.forerunnerdb.com/tutorial/todoList.html）并且难以复制其结果。我理解教程可能在Node上运行，因此jsviews和jquery等依赖项可能不一定会显示在索引示例页面上。但是，有些问题我不明白。例如，本节：

    <!-- Create a DB instance and store it globally -->
    <script type="application/javascript">
        window.fdb = new ForerunnerDB();
        db = fdb.db('test');

        // Ask forerunner to load any persistent data previously
        // saved for this collection
        db.collection('todo').load();
    </script>

导致错误，其中fdb不是函数，并且未定义db。我确保在加载依赖项之后放置此JavaScript代码，即fdb-all.min.js，但我仍然会收到错误。

目前我正在复制成品部分的代码，但是将jsviews和jquery依赖项添加到主fdb-all.min.js。因此，我的代码看起来与教程中的示例相同，但是没有运行。

我也是在非HTTP环境中运行它，这应该不是问题，因为我有一个单独的示例在我的桌面上运行时有效。

修改：

如果有帮助，这是我的代码逐字。

<html>
    <head>
        <title>My First ForerunnerDB Todo App</title>
    </head>
    <body>
        <!-- Include the whole forerunner system, bells, whistles and kitchen sink -->
<script src='http://www.forerunnerdb.com/js/forerunnerdb/dist/fdb-all.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.jsviews.com/download/jsviews.min.js'></script>
<script src='http://www.forerunnerdb.com/js/forerunnerdb/dist/fdb-autobind.min.js'></script>

        <!-- Create a DB instance and store it globally -->
        <script type="application/javascript">
            window.fdb = new ForerunnerDB();
            db = fdb.db('test');

            // Ask forerunner to load any persistent data previously
            // saved for this collection
            db.collection('todo').load();
        </script>

        <!-- Define a todo item template -->
        <script type="text/x-jsrender" id="todoItem">
            <li data-link="id{:_id}">
                <span>{^{:text}}</span>
            </li>
        </script>

        <!-- Create an element where our todo items will be output -->
        <ul id="todoList"></ul>

        <!-- Create our item entry form -->
        <form id="todoForm">
            <input id="todoText" type="text" placeholder="Enter todo item" />
            <input type="submit" value="Add Item" />
        </form>

        <!-- Use jQuery to hook the onsubmit of our form -->
        <script type="application/javascript">
            $('#todoForm').on('submit', function (e) {
                e.preventDefault();

                // Get the form's todo item text
                var itemText = $('#todoText').val();

                // Add the new item to ForerunnerDB's todo collection
                db.collection('todo').insert({
                    text: itemText
                });

                // Now we've added the item to the collection, tell
                // forerunner to persist the data
                db.collection('todo').save();
            });

            $('body').on('click', '#todoList li', function () {
                // Get the item id for the todo item clicked on
                db.collection('todo').remove({_id: $(this).attr('id')});
                db.collection('todo').save();
            });
        </script>

        <!-- Finally we tell forerunner to data-bind the collection to the todo list -->
        <script type="application/javascript">
            db.collection('todo').link('#todoList', '#todoItem');
        </script>
    </body>
</html>

Answer 1

我尝试了你的代码，问题是你是否包含来自远程服务器的脚本（不是cdn）。下载Forerunner脚本并将其包含在本地使一切正常。

了解先行者待办教程？

1 个答案: