个人中心
gpt4 book ai didi

javascript - 如何从 JSON 填充 Backbone 集合

转载 作者：行者123 更新时间：2023-11-28 18:58:48 26 4
gpt4 key购买 nike

有以下代码:

var Tasks = Backbone.Collection.extend({
    url: 'http://localhost:5000/tasks'
});

var TaskView = Backbone.View.extend({
    el: '.page',
    render: function() {
        var that = this;
        var tasks = new Tasks();

        tasks.fetch( {
            success: function(tasks) {
                var template = _.template($('#task-list-template').html(), {tasks: tasks.models});

                that.$el.html(template);
            }
        })
    }
});

var Router = Backbone.Router.extend({
    routes: {
        '' : 'home' // intentionally blank for the home page
    }
});

// Display logic
var taskListView = new TaskView({ });
var router = new Router();

router.on('route:home', function() {
    taskListView.render();
});

Backbone.history.start();

以下 HTML:

<body>

    <div class="container">
        <h1>TODO app</h1>
        <hr />
        <div class="page"></div>
    </div>

    <script type="text/template" id="task-list-template">
        <table class="table striped">
            <thead>
            <tr>
                <th>Task</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <% _.each(tasks.tasks, function(task) { %>
            <tr>
                <td><%=task.get('task') %></td>
                <td></td>
            </tr>
            <% }); %>
            </tbody>
        </table>
    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script type="text/javascript" src="todoapp.js"></script>

</body>

以及 AJAX 请求返回的以下 JSON:

{
  "tasks": [
    {
      "id": 6314025183,
      "task": "1"
    }
  ]
}

我想知道如何用 JSON 数据填充集合。我无法填写 HTML 表格。我怀疑我的收藏没有正确填写。

  1. 如何验证集合的内容？
  2. 我是否以正确的方式填充集合？

此代码基于 Thomas Davis 在 YouTube 上提供的这段视频。 https://www.youtube.com/watch?v=FZSjvWtUxYk

最佳答案

你有两个问题。一种是与代码相关的，另一种是与 API 相关的。

<小时/>

API 问题可以通过两种方式解决，但我先列出来。

当Collection请求数据(从url属性)时，它需要一个数据数组。不幸的是，您的 API 返回一个对象:

{
  "tasks": [
    {
      "id": 6314025183,
      "task": "1"
    }
  ]
}

这在许多 API 设计中很常见，并且确实说明了对 API 有用之处的普遍误解。

您会注意到您真正想要的数据位于对象的tasks键中:

[
    {
      "id": 6314025183,
      "task": "1"
    }
]

它是一个任务对象数组，每个对象都有一个 id 和 - 我假设是 - 一个任务 id。

太好了，这里有两个选择:您可以修复 API，以便对 /tasks 等集合路由的请求返回集合:

[
    {
      "id": 6314025183,
      "task": "1"
    }
]

或者，您可以使用 Backbone 的 parse 方法来破解垃圾数据。

来自 Collection.parse 的文档:

Override this if you need to work with a preexisting API, or better namespace your responses.

这是一个简单的示例:

var Tasks = Backbone.Collection.extend({
    'url': 'http://localhost:5000/tasks',

    'parse': function( apiResponse ){
        return apiResponse.tasks;
    }
});

请注意该解析方法中包含的信息，该方法没有 home。我如何知道响应的关键是 tasks？

如果我是刚接触此代码的新开发人员，那么事实是我不会。这是部落知识或我必须在 API 原始响应正文中搜索的知识。更好的解决方案是为 API 响应命名空间以按请求返回集合。

<小时/>

您的第二个问题与您的代码有关。在您的代码中，您有一个 Collection 和一个 View 以及一个模板，但在您的模板中，您将任务视为普通的 ol' javascript 对象，使用下划线来处理循环一个键。

相反，告诉您的集合如何表示其数据。

集合是一组相关的模型。

var Task = Backbone.Model.extend({});
var Tasks = Backbone.Collection.extend({
    'url': 'http://localhost:5000/tasks',
    'model': Task,

    'parse': function( apiResponse ){
        return apiResponse.tasks;
    }
});

现在，当您对集合进行水合时，它会自动创建一个代表每组离散数据的模型。

您可以将 View 更改为如下所示:

var TaskView = Backbone.View.extend({
    'el': '.page',
    'template': _.template($('#task-list-template').html()),
    'render': function() {
        var that = this;
        var tasks = new Tasks();

        tasks.fetch( {
            success: function() {
                that.$el.html( that.template( { 'tasks': tasks } ) );
             }
        })
    }
});

由于所有 Backbone 对象都以某种方式扩展下划线 ( see the docs for the details )，因此您不需要手动将传入的集合包装在下划线中。事实上，这样做几乎总是会产生错误。您的模板可能如下所示:

<html>
<body>

    <div class="container">
        <h1>TODO app</h1>
        <hr />
        <div class="page"></div>
    </div>

    <script type="text/template" id="task-list-template">
        <table class="table striped">
            <thead>
            <tr>
                <th>Task</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <% tasks.each( function( task ){ %>
            <tr>
                <td><%= task.get( 'task' ) %></td>
                <td></td>
            </tr>
            <% }); %>
            </tbody>
        </table>
    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script type="text/javascript" src="todoapp.js"></script>

</body>
</html>

此处发布的解决方案未经测试，但即使不能完全解决问题，也应该允许您进行重大调试飞跃

关于javascript - 如何从 JSON 填充 Backbone 集合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33045036/

26 4 0
文章推荐： javascript - 无法让 froogaloop 工作
文章推荐： javascript - 获取从 form.submit() 到 PHP 的 Ajax 响应
文章推荐： javascript - Angular Controller 错误
文章推荐： javascript - 意外 token "."(句点)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com