相关疑难解决方法(0)

BackboneJS渲染问题

在过去的六个月里,我一直在使用Backbone.前两个月一直在搞乱,学习并弄清楚我想如何构建我的代码.接下来的4个月正在掀起一场适合生产的应用.不要误会我的意思,Backbone已经把我从以前成为标准的数千行的客户端代码中解救出来,但它使我能够在更短的时间内完成更多宏伟的事情,从而打开一堆全新的问题.对于我在这里提出的所有问题,有简单的解决方案,感觉像黑客或只是感觉不对.我保证获得300点奖励以获得一个很棒的解决方案.开始:

  1. 正在加载 - 对于我们的用例(管理面板),悲观的同步很糟糕.对于某些事情,我需要在接受它们之前验证服务器上的内容.我们在'sync'事件合并到Backbone之前就开始了,

我们使用这个小代码来模仿加载事件:

window.old_sync = Backbone.sync

# Add a loading event to backbone.sync
Backbone.sync = (method, model, options) ->
  old_sync(method, model, options)
  model.trigger("loading")
Run Code Online (Sandbox Code Playgroud)

大.它按预期工作,但感觉不正确.我们将此事件绑定到所有相关视图并显示加载图标,直到我们从该模型收到成功或错误事件.有更好,更健全的方式吗?

现在为艰难的:

  1. 太多东西让自己太多了 - 让我们说我们的应用程序有标签.每个选项卡控制一个集合.在左侧,您可以获得该系列.单击模型以开始在中心编辑它.您更改其名称并按Tab键转到下一个表单项.现在,您的应用程序是一个"实时的东西",注意到差异,运行验证,并自动将更改同步到服务器,不需要保存按钮!很好,但表单开头的H2与输入中的名称相同 - 您需要更新它.哦,你需要更新列表中的名称.哦,名单按姓名排序!

这是另一个例子:您想在集合中创建一个新项目.按"新建"按钮,即可开始填写表格.您是否立即将该项目添加到集合中?但如果您决定丢弃它会发生什么?或者如果您将整个集合保存在另一个选项卡上?并且,有一个文件上传 - 您需要先保存并同步模型,然后才能开始上传文件(这样您就可以将文件附加到模型中).所以一切都开始渲染震动:你保存模型和列表,表格再次渲染自己 - 它现在已同步,所以你得到一个新的删除按钮,它显示在列表中 - 但现在文件上传完成上传,所以一切再次开始渲染.

添加子视图到混合,一切开始看起来像费里尼电影.

  1. 它的子视图一直向下 - 这是关于这些东西的好文章.我不能,因为对所有神圣事物的热爱,找到一种将jQuery插件或DOM事件附加到具有子视图的任何视图的正确方法.地狱随之而来.工具提示会听到渲染很长时间并且开始变得怪异,子视图变得像僵尸一样或者没有响应.这是主要的痛点,因为这里有实际的错误,但我仍然没有一个全面的解决方案.

  2. 闪烁 - 渲染速度很快.事实上,它是如此之快,我的屏幕看起来像是癫痫发作.有时它的图像必须再次加载(使用另一个服务器调用!),因此html最小化然后再次最大化 - 该元素的css宽度+高度将解决这个问题.有时候我们可以用fadeIn和fadeOut来解决这个问题 - 这是写作屁股的痛苦,因为有时我们会重复使用视图,有时会重新创建它.

TL; DR - 我在Backbone中遇到了查看和子视图的问题 - 渲染次数太多,渲染时会闪烁,子视图会分离我的DOM事件并吃掉我的大脑.

谢谢!

更多细节:BackboneJS与Ruby on Rails Gem.使用UnderscoreJS模板的模板.

javascript jquery node.js coffeescript backbone.js

32
推荐指数
2
解决办法
6017
查看次数

正确实现骨干比较器

我有点卡住实现了骨干比较器,我基本上想要根据路由选择不同的排序方法,并使用比较器对集合进行排序.理想情况下,我希望将排序逻辑封装在集合中,但似乎陷入困境.例如

    Requests = Backbone.Collection.extend({
        model : Request,
        comparator : function(ab) {
            return -ab.id;
        },          
        nooffers : function() {
            return this.sortBy(function(ab) {               
                 return ab.get('offers');
            });
        }
    }); 
Run Code Online (Sandbox Code Playgroud)

因此,默认情况下,它会根据默认比较器进行排序 - 但在我的路由中,我希望能够采取类似的措施

   routes : {
        "" : "index",
        '/ordering/:order' : 'ordering'
    },
    ordering : function(theorder) {
        ordering = theorder;
        if(theorder == 'nooffers') {
            Request.comparator = Request.nooffers();
        }
        Request.sort();
        listView.render();  
        howitworksView.render();
    }
Run Code Online (Sandbox Code Playgroud)

但是在那种情况下,我得到一个错误('c.call不是函数')任何想法?

javascript backbone.js underscore.js

21
推荐指数
1
解决办法
2万
查看次数

如何按模型类别对骨干集合进行分组,然后按模型等级对每个组进行排序

我正在关注David Sulc关于Marionette的教程. http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/,以便学习扩展它.

现在让我们说每只猫都有一个名字,等级和类别

AngryCat = Backbone.Model.extend({
   urlRoot: '/api/cats',
   defaults: {
          name: "New Cat Name",
          category: "Red Cat"
  }
});
Run Code Online (Sandbox Code Playgroud)

现在我想制作一个这样的复合视图:

第1类:红猫(03猫)

猫1

猫2

猫3

第2类:蓝猫(02猫)

猫X.

猫Y.

我怎样才能做到这一点.请帮忙!

backbone.js backbone-events backbone-views marionette

1
推荐指数
1
解决办法
2732
查看次数