Tag: backbone.js

Backbone.js在视图中获得渲染回调

我有一个Backbone应用程序，我们有这样的东西： render: function() { this.$el.html(_template()); $(‘#id’).plugin(); return this; } #id来自正在渲染的元素。 这有时只能起作用，因为实际插入dom可能需要更长的时间。 在调用我们的plugin()函数之前，是否有一种方法可以定义回调或以某种方式确定dom已更新？ 谢谢！

Backbone.js on（），这最后引用的是什么？

我正在学习Backbone，我正在试图找出我正在使用’on’函数的库。 我认为这是jQuery，但如果是这样，我不理解API。 有人可以解释’on’function或链接我的一些文档。 第一个参数是事件。 第二个参数是被调用的函数。 最后’this’指的是什么（我假设调用类），为什么需要它？ 这是我的代码，直接来自Addy Osmani，这是AppView： initialize : function() { this.input = this.$(‘#new-todo’); this.allCheckbox = this.$(‘#toggle-all’)[0]; this.$footer = this.$(‘#footer’); this.$main = this.$(‘#main’); window.app.Todos.on(‘add’, this.addOne, this); window.app.Todos.on(‘reset’, this.addAll, this); window.app.Todos.on(‘change:completed’, this.filterOne, this); window.app.Todos.on(“filter”, this.filterAll, this); window.app.Todos.on(‘all’, this.render, this); app.Todos.fetch(); },

将require.js与Twitter Boostrap API和骨干一起使用

关于此条目使用RequireJS加载Backbone和Underscore ，我很清楚如何配置Backbone特定脚本和JQuery 。 但我该怎么做： 配置Twitter bootstrap.js ？ 那json2.js呢？ 谢谢！

是否有通用的做法来跨浏览器窗口跟踪用户会话？

我正在编写一个本质上是客户端Web应用程序的网站，即页面上的所有内容都由脚本填充，其中包含来自ajax API的数据。 用户还将使用一组API登录和注销。 我的问题是如何处理以下（但不是非常极端）的用例： 用户打开浏览器选项卡A并转到网站并以＃1用户身份登录。 用户打开浏览器选项卡B并进入网站。 由于存在get_session API，脚本会在选项卡B上恢复会话。 用户从选项卡B注销，同时将选项卡A打开。 用户有时会忘记选项卡A，然后返回并使用选项卡A进行交互。 选项卡A中的脚本尝试以用户＃1的forms获取新数据但遇到错误。 理想情况下，在步骤3中应该有一些方法，当用户点击在标签B中注销时，标签A也会自动登出。 可以在步骤5中注销选项卡A（GMail这样做），但我认为应该有更好的方法。 即使在步骤5中检查也是非常重要的，因此对于这样的设计，每个API必须确切地知道脚本正在请求哪个用户的数据，否则下面的用例将产生不正确的输出。 （1-3）与上述相同。 用户打开浏览器选项卡A并转到网站并以＃1用户身份登录。 用户打开浏览器选项卡B并进入网站。 由于存在get_session API，脚本会在选项卡B上恢复会话。 用户从选项卡B注销，同时将选项卡A打开。 用户再次从选项卡B登录，但这次是用户＃2。 用户返回选项卡A并进行交互。 在认为用户是用户＃1时，选项卡A中的脚本从API请求数据。 API返回属于用户＃2的数据。 繁荣 。 是否有一种常见的做法来防止这类问题？ 谢谢。 蒂姆

实现具有多个集合的主视图。 Backbone.js的

编辑 我想要实现的简单模型 我定义了这样一个观点： define([‘jquery’, ‘underscore’, ‘backbone’, ‘text!_templates/gv_container.html’, ‘bootstrap/bootstrap-tab’], function($, _, Backbone, htmlTemplate, tab) { var GridViewContainer = Backbone.View.extend({ id: ‘tab-panel’, template: _.template(htmlTemplate), events: { ‘click ul.nav-tabs a’: ‘tabClicked’ }, tabClicked: function(e) { e.preventDefault(); $(e.target).tab(‘show’); }, render: function() { this.$el.append(this.template); return this; } }); return GridViewContainer; }); // define(…) 视图的模板如下所示： Products 最初我以为我可以使用它（作为所有集合的通用模板）。 目标 我有三个系列： products ， […]

在骨干视图中访问el之外的click事件

如何访问el范围之外的click事件。 我有什么：HTML： 查看： var ForgotPasswordView = Backbone.View.extend({ el: “#template_loader”, initialize: function () { console.log(‘Forgot Password View Initialized’); }, render: function () { blockPage(); var that = this; $.get(App.baseUrl + ‘templates/forgot-password-view.html’, function (data) { template = _.template(data, { }); that.$el.html(template); unblockPage(); }, ‘html’); }, events:{ ‘click .right_btn’:’forgotPasswordSubmit’, //Doesn’t fire as its outside of el }, forgotPasswordSubmit: […]

什么时候textarea改变事件不被触发？

我依赖于每当textarea的内容发生变化时触发的更改事件。 根据jquery文档 ，在textarea失去焦点之前，这不会被触发。 在什么情况下不能触发事件？ 是否会破坏页面，返回，点击链接等，总是会导致textarea失去焦点并被解雇？ 换句话说，是否有可能在没有焦点的文本区域丢失输入的情况下离开页面？

在jQuery中，对所有选择器使用是个坏主意吗？

我正在使用Backbone，并决定我想要一种方法来区分绑定的HTML元素和不绑定的HTML元素。 所以我会写（在HAML中）： .container .title(name=’title’) .separator 正如您所看到的，动态元素很明显是标题。 这样做的原因是我可以搞乱风格并重命名类而不用担心破坏应用程序。 它还意味着在模板中我可以告诉动态元素是什么，而无需与Backbone View来回。 这意味着我使用$(‘[name=title]’, this.el)从代码中引用此元素。 我想知道这是否缓慢，如果在任何地方使用都是一个明显的问题。 我读过id很快。 我正在使用项目列表，因此id不切实际。 class如何与name查找进行比较？ 此外，如果您有关于跟踪HTML模板中的动态元素的建议，我很乐意听到它们。 供参考： 我有了这个想法，因为我最初使用的是Backbone.ModelBinding插件，它使用动态元素的data-bind属性，但我现在正在远离它。 我正在使用CoffeeScript，Backbone和haml_coffee模板。 我还读过$(this.el).find(‘[name=title]’)比为选择器提供上下文要快。 后续问题： 用于指示是否从JS代码引用HTML元素的约定 更新了jsperf以测试所有建议： http://jsperf.com/class-or-name-attr-lookup/3

将Backbone模型和集合保存为JSON字符串

我在将Backbone.Model或Backbone.Collection对象保存到本地存储时遇到问题。 问题是，当它保存时，只保存属性，我不希望这样。 我实际上正在使用他们的示例TODO演示中提供的骨干 – 本地存储。 这是他们的保存function save: function() { localStorage.setItem(this.name, JSON.stringify(this.data)); } 当我看到JSON.stringify（this.data）返回的内容时，我只看到模型或集合的属性获取集合。 有没有办法指定我想保存模型和集合所在的整个状态，而不仅仅是属性？

Backbone.js：执行Fetch（）后，只渲染新模型

我有一个Collection App.listingList ，其中使用add:true调用后续的fetch() 。 App.listingList.fetch({ data: {some:data}, processData: true, add: true }); 问题：新添加的模型如何渲染其视图，而无需重新渲染现有模型的视图。 这意味着我做不到： this.collection.each( function(listing, index) { new ListingMarkerView({ model:listing }).render(); }, this); 尝试＃1 在集合的add事件上渲染View，我无法找到一种方法来访问要渲染的新模型 ListingListView = Backbone.View.extend({ initialize: function() { this.collection.bind(‘add’, this.renderNew, this); }, render: function() { console.log(‘render ListingListView’); this.collection.each( function(listing, index) { new ListingMarkerView({ model:listing }).render(); }, this); return this; }, renderNew: […]