Tag: backbone.js

如何在Backbone Views中获取大小（高度/宽度）信息？: 在我的骨干应用程序的渲染function中，我想用空行填充表格的其余部分以获得交替的行外观，但我不知道要添加多少行。我试过this.el.clientHeight ， $(this.el).height() ，以及这些函数的所有其他排列让它们都返回0.有谁知道怎么做？我也不想添加太多以便不引入滚动条。 var bar = Backbone.View.extend({ initialize: function(){ _.bindAll(this, “render”); }, render: function(){ var html = “Hi!”; $(this.el).html(html); var myWidth = this.el.width(); alert(myWidth); return this; } }); var foo = Backbone.View.extend({ el: $(‘#myElement’), initialize: function(){ _.bindAll(this, “render”); this.subview = new bar(); }, render: function(){ $(this.el).append(this.subview.render().el); return this; } }); var bar […]

Backbone，在加载所有内容时触发事件: 在我的骨干应用程序中，我加载3个集合，并在渲染function中绑定“重置”事件。因此，通过这种方式，当我获取集合时，我会打印各种结果，但不能同时打印。我会使用jquery延迟方法（$ .when，$ .then）同时打印所有，如果我在视图上使用“绑定事件”，如何做到这一点？这是代码：路由器： App.Routers.test1 = Backbone.Router.extend({ routes: { “/test” : “test” }, initialize: function() { // Models this.Models_1 = new App.Collections.coll_1; this.Models_2 = new App.Collections.coll_2; this.Models_3 = new App.Collections.coll_3; // Views this.View_1 = new App.Views.view_1( {model: this.Models_1} ); this.View_2 = new App.Views.view_2( {model: this.Models_2} ); this.View_3 = new App.Views.view_3( {model: this.Models_3} […]

Backbone中添加了多个模态: 我从DetailsView打开模态如下： var $ = jQuery = require(‘jquery’), Backbone = require(‘backbone’), Handlebars = require(‘handlebars’), _ = require(‘underscore’), skuDetailsTemplate = require(“../../templates/sku/SkuDetails.html”), skuDetailsModel = require(‘../../models/sku/SkuDetailsModel’), updateSkuModel = require(‘../../models/sku/UpdateSkuModel’), skuUpdateView = require(‘../../views/sku/UpdateSkuView’), inventoryForFacilityModel = require(‘../../models/inventory/InventoryForFacilityModel’), skuListingModel = require(‘../../models/sku/listing/SkuListingModel’); var SkuDetailsView = Backbone.View.extend({ el: “.sku-details-container”, tagName: “div”, initialize: function (options) { var self = this; this.skuDetailsModel = new skuDetailsModel(); […]

Backbone删除视图和DOM节点: 所以我注意到我的应用程序在一些扩展使用后变慢了。特别是当我创建许多视图时，这些视图是长列表中的每个项目。我原以为通过view.remove（）删除这些视图有助于解决问题但是当它们从页面中删除时，我注意到Chrome的时间轴显示我的DOM节点数没有减少。我添加的每个视图都会继续增加这个数量。事实上，似乎唯一减少此节点计数的是页面刷新。这对我来说感觉不对，我觉得我搞砸了一些非常基本的东西，因为问题似乎发生在我的所有观点而不仅仅是这些观点。这些视图列表的发生速度要快得多，因为它们有很多。有没有人对我应该寻找什么有任何建议？什么样的原因可以产生这种行为？我提供代码，但我不知道什么是有用的。 TL; DR – View.remove（）正在从页面中删除视图，但我的DOM节点计数继续上升并且永远不会下降。

Backbone – 从API获取JSON数据: 这些最后几天我在玩Backbone。我想从twitter搜索API接收一些数据。但我真的不明白它是如何运作的。这是我的代码： (function($){ Tweet = Backbone.Model.extend(); Tweets = Backbone.Collection.extend( { model: Tweet, url: ‘http://search.twitter.com/search.json?q=Hamburg&rpp=5&lang=all&callback=?’, parse: function(response) { return response.results; } }); DefaultTweetView = Backbone.View.extend( { initialize: function(){ _.bindAll(this, ‘render’); } template: _.template(‘@ ‘), render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } }); app = new Tweet(); })(jQuery); 我认为这不对。但我不知道如何处理它:(有人可以帮助我或发布一个链接，我可以按照一些关于json数据和主干的说明吗？

将数据从一个Backbone视图传递到另一个: 假设我有以下Backbone视图，它加载两个链接，一个带有锚文本“test1”，另一个带有锚文本“test2”。我绑定了一个click事件，我得到了被点击的链接的HTML，并将其存储在clickedHtml变量中。现在，此视图由Backbone路由器加载。当用户单击两个链接（test1或test2）中的任何一个时，路由器将加载另一个名为“main”的视图。现在，我如何将“clickedHtml”变量传递给该视图？我应该使用LocalStorage吗？我应该像window.clickedHtml一样全局声明吗？有没有更好的办法？泰！ // file: views/test.js define([ ‘jquery’, ‘underscore’, ‘backbone’ ], function($, _, Backbone) { var Test = Backbone.View.extend({ el : ‘.test’, initialize : function () { var that = this; that.$el.html(‘test1test2’); }, events : { ‘click .test a’ : ‘click’ }, click : function (e) { var clickedHtml […]

Backbone.js和本地存储。必须指定“url”属性或函数: 我正在提高我对Backbone.js的了解，并从教程中获取此代码示例。（ http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/ ）此示例暂时不会访问服务器，因此为了模拟从服务器检索数据，我有一个文件名movies.json。我想做什么：在本地存储中添加json数据（使用localStorage适配器）为此，我使用Backbone.ajaxSync，localStorage适配器为别名Backbone.sync提供：我创建了方法refreshFromServer（）来执行此操作这样做的原因是我试图实现一种只获取一次数据的方法（并且只在需要时刷新）我的问题：当我调用refreshFromServer（）时，我遇到错误“ Uncaught Error：’url’属性或函数必须指定 ”。我不明白为什么因为我设置了url集合。（url：“scripts / data / movies.json”）示例代码 var Theater = { Models : {}, Collections : {}, Views : {}, Templates : {} } Theater.Models.Movie = Backbone.Model.extend({}) Theater.Collections.Movies = Backbone.Collection.extend({ model : Theater.Models.Movie, localStorage : new Backbone.LocalStorage(“MovieStore”), // Unique name within your […]

Backbone.js将视图附加到多个元素: 我对骨干很新，所以我可能会违反骨干的本质。建议表示赞赏：我制作了一种墙式系统。因此，有一个表单可用于在墙上发布更新。每个更新都可以对它们发表评论。我一次显示10个更新。所以有10个评论表格。所以我有一个观点： CommentForm=Backbone.View.extend({ initialize:function(messageView){ }, events:{ “submit”:”postcomment” }, showMessage:function(data){ if(data.success) type=”success”; else type=”error”; message=data.error?data.error:”Update posted successfully”; $messageContainer=$this.prev(); console.log($this); var html=””+message+””; $($messageContainer).html(html); }, postcomment:function(){ $this=$(this.el); $.post(baseUrl+”/portal/post-comment”,$this.serialize(),this.showMessage,”json”); return false; } }); 现在我按如下方式创建一个实例： commentFormView= new CommentForm({el:$(“.comment-form form”)}); 请注意.comment-form是一个div。有多个这样的元素。事件处理程序很好地附加到所有注释表单。但是当我使用$this=$(this.el); 它总是指第一个评论表。我该如何解决这个问题。 $（this.el）应该引用注释表单的当前实例，其中事件被触发而不是第一个

使用underscore.js迭代对象: 所以，我正在学习backbone.js，并且正在使用下面的示例在视图中迭代某些模型。第一个代码段工作，而另一个基于下划线.js的代码不起作用。为什么？ // 1: Working this.collection.each(function(model){ console.log(model.get(“description”)); }); // 2: Not working _.each(this.collection, function(model){ console.log(model.get(“description”)); }); 我做错了什么，因为我自己看不到它？

把手不填表: 我正在使用Handlebars（v 1.0.0）来填充HTML表格。但不知怎的，它并没有像我以前那样填满表格。这是我的模板： {{#if users}} {{#each users}} {{username}} {{email}} {{/each}} {{else}} No users found! {{/if}} 所以我确实找到了用户，因为我没有看到“找不到用户！” 当我调用一个空对象时，它确实显示“找不到用户！”。当我不使用该表并打印出这些用户时，如下一个示例。用户名和邮件地址’将显示在我的HTML中。 {{#if users}} {{#each users}} {{username}} {{email}} {{/each}} {{else}} No users found! {{/if}} 以下是我在javascript中构建模板的方法： var htmlSource = $(data).html(); var template = Handlebars.compile(htmlSource); var compiled = template(usersArray); that.$el.html(compiled); 现在当我在console.log中编译对象时，它不会显示该表。你知道为什么它不起作用你能帮助我吗？编辑：我刚刚测试了一些，发现当我省略标签时，数据将显示在HTML中。但是和不会出现在html中。将显示其中的数据。 […]