在backbone.js中渲染集合视图

2024-01-13

我在理解如何使用模板在视图中渲染集合时遇到问题。这是我的代码:

<div id="mydiv"></div>

<script type="text/template" id="details">
<ul>
<% _.each(?, function(person)  { %>
<li><%= person.name %></li>
<% }); %>
</ul>
</script>

<script>
var m = Backbone.Model.extend();

var c = Backbone.Collection.extend({
        url: 'retrieve.php',
        model: m
 });

var v = Backbone.View.extend({
        el : $('#mydiv'),
        template : _.template($("#details").html()),
        initialize : function() {
        var coll = new c(); 
        coll.fetch({success: function(){alert(JSON.stringify(coll));} });              
        this.render();
        },
        render : function() {
        //what do I put here?
        return this;
       }
});

var view = new v();

我对如何将从 php 文件返回的数据获取到模板中感到困惑。视图和 ._each 中需要什么代码?我的 php 代码返回:

 [{"id":"1","name":"John","age":"5"},{"id":"2","name":"Jane","age":"2"}]

我在alert()中看到了这一点。


你应该打电话给你的render函数从success处理程序作为collection.fetch异步返回结果(您也可以bind http://backbonejs.org/#Events-listenTo render集合函数reset event).

var v = Backbone.View.extend({
    el : '#mydiv',
    template : _.template($("#details").html()),
    initialize : function() {
      var self = this, 
          coll = new c(); 
      coll.fetch({ success: function(){ self.render() ; } });              
    },
    render : function() {
      // the persons will be "visible" in your template
      this.$el.html(this.template({ persons: this.coll.toJSON() }));
      return this;
    }
});

并在模板中引用相同的内容persons object

<script type="text/template" id="details">
  <ul> 
    <% _.each(persons, function(person)  { %>
      <li><%= person.name %></li>
    <% }); %>
  </ul>
</script>

Update:

我已经创建了工作fiddle http://jsfiddle.net/superhacker/P2JR8/3/,但我不得不修改原始源代码,因为我不能使用你的retrieve.php终点

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在backbone.js中渲染集合视图 的相关文章

  • 在Javascript中,这个下划线是什么意思?

    var Gallery Backbone Controller extend index null photos null album null subalbums null subphotos null data null photosv
  • 如何使用主干单页应用程序在 MVC4 中测试 AntiForgeryToken

    我在获取 Microsoft 的 MVC 时遇到问题 ValidateAntiForgeryToken 使用使用 Marionette Backbone 编写的单页应用程序 SPA 问题似乎是MVC ValidateAntiForgeryT
  • Backbone.js 中的分页

    我知道有一个组件可以实现此目的 但根据我所看到的 您必须创建一个扩展组件的新集合 还有另一种方法可以在主干中进行分页吗 我所需要的只是一个上一个和下一个按钮 将每页的项目限制为 12 个 我一直在 javascript 上创建它 对于生产环
  • 使用 $(function 等启动 javascript 代码

    我正在研究 Backbone 和来自的待办事项示例应用程序http todomvc com http todomvc com 我注意到有 3 种方法可以在文件中启动代码 function code here function code he
  • 如果用户尚未登录,我如何拒绝他们访问我的 Backbone 应用程序的部分内容?

    所以我有一个 Backbone 应用程序 网页主页 现在 如果您登录我的网站 我会使用数据库中的用户详细信息创建一个全局对象 但是 您仍然可以直接点击应用程序中的其中一条路线 我应该如何处理未 登录 的用户并将他们重定向到 您必须登录页面
  • 骨干木偶区域显示无渲染

    是否可以将已渲染的视图放入骨干牵线木偶区域而无需再次渲染 例如 region show myView This will call render on myView 我不希望该区域再次呈现我的视图 If I do region attach
  • 在骨干模型上声明变量而不设置默认值

    我刚刚开始使用backbone js 我正在寻找一种在模型上声明字段而无需提供默认值的方法 它实际上仅供参考 以便当我开始创建实例时 我可以看到需要初始化哪些字段 用java之类的东西我会写 public class CartLine St
  • 使用node.js和backbone.js进行模板渲染

    有没有人找到一个好的解决方案来开发可在服务器和客户端上使用的backbone js模板 这对于backbone js历史堆栈来说是非常理想的 因为用户可以在浏览器位置栏中共享和链接到真实的url 并且node js服务器可以在第一个页面视图
  • 避免从主干视图重新渲染图像和其他内容

    当我重新渲染主干视图时 有什么好方法可以跳过重新渲染图像和谷歌地图等内容 每次重新渲染视图时 我的照片和地图视图都会闪烁得很厉害 这种情况很常见 特别是对于图像 模板引擎从头开始布局布局 这会导致图像标记再次从服务器或从缓存中获取位图 当然
  • 主干表视图消耗行视图 - 如何构造?

    我有一组模型希望在表格视图中呈现 每个模型应由表中的一行表示 并且该行应使用模板生成 我应该能够将事件处理程序附加到该行 例如单击 在事件发生时发出有关与该行关联的模型的一些特定信息 我见过类似的事情的一种常见方法是将每一行分解到它自己的视
  • 使用 bootstrap-modal 作为 Backbone.js 视图

    我正在尝试创建一个基于 Twitter 引导模式的 Backbone js 视图 该视图通过以下方式使用 Backbone 的自动事件委托 events视图的属性 不幸的是 bootstrap modal 似乎破坏了 Backbone 的事
  • Backbone.js / Marionette.js 中的路由 - 无主题标签、路由列表和子路由器

    我对 Backbone js Marionette js 中的路由有三个问题 1 如何获取我的应用程序路由器已注册的所有路由的列表 例如对于 Express js 在 Node js 中 它将是app routes 我尝试对 Backbon
  • 使用 Rivets.js 迭代 Backbone.js 模型的集合?

    我在用着铆钉 js http rivetsjs com 对于 Backbone 项目中的两个双向数据绑定 并且希望实现迭代绑定 文档表明迭代绑定是可能的 但没有可用的示例 我正在使用一个简单的 Rails API 将 JSON 发送到客户端
  • 在主干/下划线模板中使用循环

    我有一个backbone js underscore js 模板 我将其输入到主干视图中进行渲染 视图传递一个包含数组的模型posts对象 我称之为post在模板中 Problem 当我尝试循环遍历数组的所有元素时posts 我收到一个错误
  • Backbone.js 模型默认值和解析

    我有这个Backbone Model代表 Google Books API 卷 var Book Backbone Model extend defaults volumeInfo title n a authors n a publish
  • 对周围的所有 Node JS 框架/库等感到困惑 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我感觉有点困惑 有很多 Node js 相关 东西 的框架 有人能给我一个概述吗 以下库 框架 其他内容如何相互关联 交互 其中包括什么或
  • Backbone-relational 无法实例化两个 RelationalModel 对象

    我正在尝试实现 BackboneRelational 并不断获得 无法实例化多个 Backbone RelationalModel 每种类型都有相同的 ID class App Models User extends Backbone Re
  • 简单的 Backbone 搜索页面 - 您会怎么做?

    我想使用 Backbone 实现一个简单的搜索页面 它不是单页应用程序 但仍然想使用 Backbone 构建我的 JavaScript 代码 搜索页面由搜索表单和搜索结果组成 搜索是通过 AJAX 完成的 并且必须保存在历史记录中 从历史记
  • 渲染闭合的 Marionette 视图

    关闭的 Marionette 视图在再次渲染时不应该重新委托定义的事件 事件 modelEvents CollectionEvents 吗 似乎我必须在关闭并重新渲染视图后手动调用 delegateEvents 否则视图将无法按预期工作 h
  • Socket.IO - 开放连接是一个问题吗?

    我目前正在与DerbyJS http derbyjs com 因为它促进了干净 干燥的客户端 服务器代码 附带好处 大多数人使用该框架的主要原因 是它使用 Socket IO 来创建实时应用程序 在这种情况下 我不need实时 但这是一个很

随机推荐

  • 执行随机方法[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在尝试制定执行随机方法的逻辑 比方说 我有 10 个方法 我需要运行随机选择的其中一个 main 方法将驻留在我的 Rails 3 2
  • 如何在 IOS 中将可调整大小的 UIView 的一个角圆化?

    我正在使用这段代码来修整我的一个角UIView UIBezierPath maskPath UIBezierPath bezierPathWithRoundedRect self view bounds byRoundingCorners
  • VSCode 内部正则表达式搜索与负向后查找

    在 VSCode 中 尝试搜索print and print 但前提是后面没有 这是我第一次尝试在 VSCode 中进行正则表达式搜索 例子 print Test One MATCH print Test Two MATCH print T
  • JS 自动转换括号中的文本与特定标记(包括匹配)

    页面加载后 我想找到正文中封装在括号中的所有文本 这是一个示例 并将其替换为以下内容
  • git 如何处理将另一个存储库克隆到子目录中?

    我刚刚将一个存储库克隆到另一个存储库的子目录中 而 git 实际上似乎可以非常智能地处理这种情况 我了解子模块 但我认为它们总是必须明确定义 并且我不认为 git 有此功能 发生了什么 这是我的 shell 会话 https gist gi
  • 字典 C# 中的 GetHashCode 和 Equals 实现

    我来到这个网站搜索 Dictionary 中的对象比较 我发现重写 GetHashCode 和 Equals 是在 C 中进行对象比较的必须条件 这是我一直试图使用 FOREACH 迭代方法解决的一段代码 但由于性能问题 我的老板说要在不使
  • 评估嵌套逻辑表达式的算法

    我有一个想要评估的逻辑表达式 该表达式可以嵌套 由 T True 或 F False 和括号组成 括号 表示 逻辑或 彼此相邻的两个项 TF 或彼此相邻的任何其他两个组合 应为 ANDED 逻辑与 例如 表达式 TFT T true 我需要
  • 此事件处理程序代码会导致内存泄漏吗?

    假设我派生了一个 WPF 控件 例如 TextBox 并且我重写了 On 方法之一 例如 OnInitialized 假设我这样做了 this Initialized delegate 如果包含此控件的窗口关闭 如果不执行其他操作 是否会导
  • 聚合物输入变化事件

    我想要的只是能够从聚合物元素 获取输入并在更改时发出警报 而无需创建自定义聚合物元素 问题 on change 不执行任何操作 我怀疑 this value 会做任何事情 伪代码
  • 使用“like”时,Mysql 日期时间索引不起作用

    我在 MySQL 中创建了一个表 CREATE TABLE index test moment DATETIME one more attr VARCHAR 10 ALTER TABLE index test ADD INDEX momen
  • 如何从维基百科获取信息框数据?

    如果我有某个页面的 URL 我如何使用 MediaWiki Web 服务获取右侧的信息框信息 通过此 Python 库使用 Mediawiki API https github com siznax wptools https github
  • 如何正确生成/恢复 OpenMP 未绑定任务?

    我编写了一个小型 C 程序来评估 OpenMP 在任务出现空闲时间 例如等待通信数据 时让出另一个任务的能力 include
  • 尝试在opencart中添加jquery倒计时器以获得特价

    我正在尝试在 opencart 中以特殊价格放置 jquery 倒计时器 因为我们在打开购物车管理面板中有特价的开始日期和结束日期 我想要 jquery 计数计时器来显示剩余的 days Hours Min SEC 为了这个特别的价格 我得
  • 当我将 Intellij IDEA 配置为使用 Java6 时,使用 java7 编译器进行编译

    我已将 Module SDK 设置为 1 6 我还将 Project SDK 设置为 1 6 我还将 Java 编译器选项从设置更改为使用 java 6 但仍然使用java 7来编译 当我编译或运行时出现以下错误 Using javac 1
  • 使用 SqlCommand 异步方法处理大数据时的性能很糟糕

    我在使用异步调用时遇到了主要的 SQL 性能问题 我创建了一个小案例来演示这个问题 我在 SQL Server 2016 上创建了一个数据库 该数据库驻留在我们的 LAN 中 因此不是 localDB 在该数据库中 我有一个表Working
  • Amazon AWS EC2 - 获取 .cer 文件而不是 .pem

    当我从安全凭证下载私钥文件时 我得到了 cer 文件而不是 pem 我尝试使用它来 ssh 到我的 ec2 实例 但我不断收到 密码错误 请重试 pk xxxxxxxxxxx 是因为我有 cer 文件还是因为我需要密码 我不知道什么是密码
  • 实时替换图像上的颜色

    首先我会解释一下我的情况 以便您更好地了解我的问题 我正在制作一个 HTML5 应用程序 我有一个画布 使用颜色选择器可以更改画布的颜色 现在我有一张图片想要放在画布上 但需要使用颜色选择器更改图片颜色 所以我需要替换该图片上的黑色并将其放
  • xsl for-each 创建可迭代节点列表

    我需要按照语言字段的排序顺序多次迭代 XML 文件的元素 我尝试的是获取可迭代的语言列表 如下所示
  • C#:为类的 GET/SET 属性创建事件

    我希望每次设置类中的属性时都会触发一个事件 我希望每当设置我的属性之一时都能够触发相同的事件 我有 大约12个 I e public class MyClass private int myHeight private int myWidt
  • 在backbone.js中渲染集合视图

    我在理解如何使用模板在视图中渲染集合时遇到问题 这是我的代码 div div