Tag: backbone.js

如何处理Backbone.js中的初始化和渲染子视图？: 初始化和渲染视图及其子视图有三种不同的方法，每种方法都有不同的问题。我很想知道是否有更好的解决所有问题的方法：情景一：初始化父项初始化函数中的子项。这样，并不是所有东西都被卡在渲染中，所以在渲染时阻塞较less。 initialize : function () { //parent init stuff this.child = new Child(); }, render : function () { this.$el.html(this.template()); this.child.render().appendTo(this.$('.container-placeholder'); } 问题：最大的问题是，再次调用父对象的渲染将删除所有的孩子事件绑定。（这是因为jQuery的$.html()是如何工作的。）这可以通过调用this.child.delegateEvents().render().appendTo(this.$el);来缓解this.child.delegateEvents().render().appendTo(this.$el); 相反，但是第一个，也是最常见的情况是，你不必要地做更多的工作。通过追加孩子，你可以强制渲染function掌握父母DOM结构的知识，以便得到你想要的顺序。这意味着更改模板可能需要更新视图的渲染function。情景二：初始化父对象的initialize()中的子对象，但是不要追加，而是使用setElement().delegateEvents()将子对象设置为父对象模板中的一个元素。 initialize : function () { //parent init stuff this.child = new Child(); }, render : function () { this.$el.html(this.template()); this.child.setElement(this.$('.placeholder-element')).delegateEvents().render(); } […]

view.render（）之后的Backbone.js事件完成: 有没有人知道在backbone.js中显示视图后会触发哪个事件？

如何在underscore.js模板中使用if语句？: 我正在使用underscore.js模板function，并做了这样的模板： <script type="text/template" id="gridItem"> <div class="griditem <%= gridType %> <%= gridSize %>"> <img src="<%= image %>" /> <div class="content"> <span class="subheading"><%= categoryName %></span> <% if (date) { %><span class="date"><%= date %></span><% } %> <h2><%= title %></h2> </div> </div> </script> 正如你所看到的，我有一个if语句，因为我所有的模型都没有date参数。但是这样做的方式给了我一个错误的date is not defined 。那么，如何在模板中声明呢？

如何保存Backbone.js模型数据？: 我更加注重前端开发，最近开始将Backbone.js浏览到我的应用程序中。我想将模型数据保存到服务器。你能否解释我保存模型数据的各种方法（使用json格式）。我在服务器端使用Java。另外我主要看到REST被用来保存数据。由于我更多的是前端开发，我不知道REST和其他类似的东西。如果有人能够用一个简单的例子来解释我的过程，那将是非常好的。

骨干，而不是“this.el”包装: 我广泛使用模板，我喜欢使用完整的模板。我的意思是我想在模板代码中看到所有的DOM元素，包括根元素，就像这样： <script type="text/template" id="template-card"> <div class="card box" id="card-<%= id %>"> <h2><%= title %></h2> <div><%= name %></div> </div> </script> 但Backbone喜欢的是有这样一个模板： <script type="text/template" id="template-card"> <h2><%= title %></h2> <div><%= name %></div> </script> 在JS代码中定义根元素及其属性。我认为是丑陋和混乱。那么，是否有避免使用Backbone View来使用额外的DOM元素封装模板的好方法呢？我一直在检查这个问题的线程： https ： //github.com/documentcloud/backbone/issues/546 ，我明白没有任何官方的方式来做到这一点..但也许你可以推荐我一个非官方的方式。

销毁或删除Backbone.js中的视图: 我目前正在尝试实施视图的销毁/删除方法，但我不能得到一个通用的解决scheme，为我所有的意见工作。我希望有一个事件附加到控制器，以便当一个新的请求通过它破坏以前的意见，然后加载新的。有没有办法做到这一点，而不必build立每个视图的删除function？

Backbone.js：重新填充或重新创build视图？: 在我的Web应用程序中，我在左侧的表中有一个用户列表，右侧有一个用户详细信息窗格。当pipe理员点击表格中的用户时，其详细信息应显示在右侧。我有一个UserListView和UserRowView在左边，UserDetailView在右边。事情的工作，但我有一个奇怪的行为。如果我点击左边的一些用户，然后点击删除其中一个，我得到所有已经显示的用户连续的JavaScript确认框。它看起来像事件绑定的所有以前显示的意见还没有被删除，这似乎是正常的。我不应该每次在UserRowView上做一个新的UserDetailView？我应该保持一个观点，并改变其参考模型？在创build新视图之前，我应该跟踪当前视图并将其删除吗？我有点失落，任何想法都会受到欢迎。谢谢！这里是左视图的代码（行显示，点击事件，右视图创build） window.UserRowView = Backbone.View.extend({ tagName : "tr", events : { "click" : "click", }, render : function() { $(this.el).html(ich.bbViewUserTr(this.model.toJSON())); return this; }, click : function() { var view = new UserDetailView({model:this.model}) view.render() } }) 而右视图的代码（删除button） window.UserDetailView = Backbone.View.extend({ el : $("#bbBoxUserDetail"), events : […]

如何在使用AMD（require.js）时在Backbone.js中加载引导模型: Backbone.js文档build议以这种方式加载bootstrapped模型： <script> var Accounts = new Backbone.Collection; Accounts.reset(<%= @accounts.to_json %>); var Projects = new Backbone.Collection; Projects.reset(<%= @projects.to_json(:collaborators => true) %>); </script> 但是这是一个不能在AMD方法中使用的模式（使用require.js）唯一可能的解决scheme是声明存储JSON数据的全局variables ，稍后在相关的初始化方法中使用这个variables。有没有更好的方式来做到这一点（没有全局variables）？

主干：为什么把`$（'＃footer'）`分配给`el`？: 我发现了以下陈述： el: '#footer' var todosView = new TodosView({el: $('#footer')}); 为什么把$('#footer')分配给el ？这真是让我困惑。我在这里阅读这篇文章，Backbone.js视图中的$ el和el有什么区别？，仍然困惑。另外，我读了： view.$el属性相当于$(view.el)和view.$(selector)相当于$(view.el).find(selector) 。在我们的TodoView示例的render方法中，我们看到this.$el用来设置元素的HTML， this.$()用于查找类“edit”的子元素。但是，有人说如果你调用$(this.el) ，你只是继续执行jqueryselect器来获得相同的jquery对象。 '$ el'是$(this.el)的caching版本什么是“caching版本”？

Underscore中的外部模板: 我使用Underscore模板。可以附加一个外部文件作为模板？在骨干视图中我有： textTemplate: _.template( $('#practice-text-template').html() ), initialize: function(){ this.words = new WordList; this.index = 0; this.render(); }, 在我的HTML是： <script id="practice-text-template" type="text/template"> <h3>something code</h3> </script> 它运作良好。但是我需要外部模板。我尝试： <script id="practice-text-template" type="text/template" src="templates/tmp.js"> 要么 textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ), 要么 $('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) }) 但它没有工作。