TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Avoiding Common Backbone.js Pitfalls

154 点作者 liordegani大约 12 年前

7 条评论

jashkenas大约 12 年前
Great article highlighting some common areas for attention -- <i>especially</i> when first moving from vanilla jQuery to something like Backbone ... but important for any basic Model/View layer separation.<p>For what it's worth, <i>all</i> 5 of these points are addressed by the Backbone docs, and there are some further nuances worth mentioning:<p>1. listenTo() is great when you're connecting <i>from</i> an object (frequently a View) that will be removed long before the object that its observing is removed. But when the two (the observer, and the observed) tend to live and die together in the same cycles, no special care is needed, as garbage collection will simply remove both together.<p>2. An easier way to avoid multiple DOM reflows when rendering collections, is to simply use a less granular template instead of a document fragment. You can even render the "item" template directly within the optimized "collection" template (remember, a template is just a function that takes data and returns HTML). For example:<p><pre><code> &#60;div class="books-collection"&#62; &#60;% books.each(function(book) { %&#62; &#60;%= templates.bookItem({model: book}) %&#62; &#60;% }); %&#62; &#60;/div&#62; </code></pre> 3. Absolutely. Addressed in the FAQ: <a href="http://backbonejs.org/#FAQ-bootstrap" rel="nofollow">http://backbonejs.org/#FAQ-bootstrap</a>. While bootstrapping models, be careful that you don't inject arbitrary user JSON into the page without properly escaping it first -- if there's any data shared publicly between different users of your app. Otherwise they can throw a "&#60;/script&#62;" into their post, and ruin your day.<p>4. All of Backbone's "save" calls are optimistic <i>by default</i>. If you'd rather a specific call be pessimistic instead, just pass "{wait: true}", in order to wait for the server to respond with a 200 OK before emitting the change on the client.<p>5. Yep. Instead of putting further model changes in a "success" callback, simply have a listener waiting for the "change" event. Then Ajax is out of the equation, and whenever the model state is considered to be "change"'d on the client-side, that change propagates appropriately through the system.
评论 #5449430 未加载
评论 #5452786 未加载
alexangelini大约 12 年前
For those who have not yet tried it, I would highly recommend TIm Branyen's Backbone.LayoutManager [1]. It solves items 1 and 2 very well.<p>[1] <a href="https://github.com/tbranyen/backbone.layoutmanager" rel="nofollow">https://github.com/tbranyen/backbone.layoutmanager</a>
评论 #5452335 未加载
zaius大约 12 年前
Respectfully disagree with point 3 - "Doing unnecessary XHR requests on page load".<p>It's better to have your main app page completely static so it can be cached. That said, don't use ajax either - load the initial data via its own script tag.
评论 #5453758 未加载
评论 #5453786 未加载
ender7大约 12 年前
Nitpick: I'm not sure that append() will trigger a reflow for every call. That will only happen if you interleave calls to a reflow-required property such as clientWidth. Anyone have a definitive answer?
dclowd9901大约 12 年前
I often find people get hung up on the part where they already have an app that isn't RESTful and doesn't necessarily return a clean JSON object on page load.<p>Front loading data is an easy way around this and if you're savvy enough you can create a fairly clean, agnostic shim to programmatically handle this for you (so long as you can make your backbone info align with your backend model structure).
rajivtiru大约 12 年前
Does anyone know if marionette takes care of the DOM reflow problem?<p>I'm looking at the source and it looks like it does not.<p><a href="https://github.com/marionettejs/backbone.marionette/blob/master/src/marionette.collectionview.js#L88-L94" rel="nofollow">https://github.com/marionettejs/backbone.marionette/blob/mas...</a>
tocomment大约 12 年前
Is backbone the best Javascript framework to go with these days? I'm keen to switch to this style of web development but I'm waiting for the community to pick a winner.
评论 #5451244 未加载
评论 #5451204 未加载