草庐IT

javascript - 将 JSON 数据渲染到 backbone.js 模板

coder 2024-07-20 原文

我环顾四周,找不到这个问题的答案。我正在尝试获取本地 JSON 文件,使用 Backbone.js 加载它并将其呈现为浏览器中的模板。我的文件下载了,模板出现了,但它从未被数据填充。有什么想法吗?提前致谢。

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>People list</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>


  <div class="container">
    <h1>People list</h1>
    <hr />
    <div class="page"></div>
  </div>


  <script type="text/template" id="people-template">

    <table class="table striped">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th>
          <th>Photo</th>
          <th>Video</th>
        </tr>
      </thead>
      <tbody>
        <% _.each(PersonCollection, function(Person) { %>
          <tr>
            <td><%= Person.get("firstName") %></td>
            <td><%= Person.get("lastName") %></td>
            <td><%= Person.get("age") %></td>
            <td><%= Person.get("photo") %></td>
            <td><%= Person.get("video") %></td>
          </tr>
        <% }); %>

      </tbody>
    </table>  
  </script>

  </body>

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

JavaScript

  <script>

    // MODEL MODEL MODEL
    // MODEL MODEL MODEL

    var Person = Backbone.Model;

    // COLLECTION COLLECTION COLLECTION
    // COLLECTION COLLECTION COLLECTION

    var PersonCollection = Backbone.Collection.extend({
      model: Person,
      url: '/people.json',
      parse: function (response) {
        return response
}
    });

    // VIEWS VIEWS VIEWS
    // VIEWS VIEWS VIEWS

    var About = Backbone.View.extend ({
      el: '.page',
      render: function () {
        var that = this;
        var people = new PersonCollection();
        people.fetch({
          success: function (PersonCollection) {
            var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models});
            that.$el.html(template);
          }
        })
      }
    });  


    var About = new About ();

    // ROUTES ROUTES ROUTES
    // ROUTES ROUTES ROUTES    

    var Router = Backbone.Router.extend({
      routes: {
        '': 'home'
      }
    });

    var router = new Router();
    router.on('route:home', function () {
      About.render();
    });

    Backbone.history.start();

  </script>

JSON 示例

{
  "people": [
    {
      "firstName": "Jane",
      "lastName": "Doe",
      "age": "32",
      "photo": "test_photo",
      "video": "test_video"
    },
    {
      "firstName": "James",
      "lastName": "Hamm",
      "age": "56",
      "photo": "test_photo",
      "video": "test_video"
    },

再次感谢您的任何建议。我是 stackoverflow 的新手(第一个问题已发布),所以如果我需要提供更多信息,请告诉我。

最佳答案

如果您不想修改您的 JSON 文件,您可以更改 PersonCollection 中的解析函数以返回 person 数组。示例:

var PersonCollection = Backbone.Collection.extend({
    model: Person,
    url: '/people.json',
    parse: function (response) {
        // Return people object which is the array from response
        return response.people
    }
});

Backbone 文档:http://backbonejs.org/#Model-parse

parse is called whenever a model's data is returned by the server, in fetch, and save. The function is passed the raw response object, and should return the attributes hash to be set on the model. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.

关于javascript - 将 JSON 数据渲染到 backbone.js 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16639633/

有关javascript - 将 JSON 数据渲染到 backbone.js 模板的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名,我的程序将对其进行迭代。在我之前使用的bash脚本中,我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是,我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  5. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  6. ruby-on-rails - 如何使用 Rack 接收 JSON 对象 - 2

    我有一个非常简单的RubyRack服务器,例如:app=Proc.newdo|env|req=Rack::Request.new(env).paramspreq.inspect[200,{'Content-Type'=>'text/plain'},['Somebody']]endRack::Handler::Thin.run(app,:Port=>4001,:threaded=>true)每当我使用JSON对象向服务器发送POSTHTTP请求时:{"session":{"accountId":String,"callId":String,"from":Object,"headers":

  7. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  9. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit

  10. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目,Java开发。基于数据库增量日志解析,提供增量数据订阅&消费。Git地址:https://github.co

随机推荐