Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用模型和集合在Backbone.js中建模非标准操作_Javascript_Backbone.js_Underscore.js_Frontend - Fatal编程技术网

Javascript 使用模型和集合在Backbone.js中建模非标准操作

Javascript 使用模型和集合在Backbone.js中建模非标准操作,javascript,backbone.js,underscore.js,frontend,Javascript,Backbone.js,Underscore.js,Frontend,我正在做一个项目,其中有一个“阅读列表”,在这个列表中有“阅读列表项”-它们是一个抽象概念,在服务器端可以是书籍、文章等-它们由一个装饰师处理,该装饰师将差异抽象出来,效果非常好 我正在做一些看起来或多或少像这样的事情: window.ReadingListView = Backbone.view.extend el: '#reading_list' render: -> @el.empty() @collection.each (list_item) ->

我正在做一个项目,其中有一个“阅读列表”,在这个列表中有“阅读列表项”-它们是一个抽象概念,在服务器端可以是书籍、文章等-它们由一个装饰师处理,该装饰师将差异抽象出来,效果非常好

我正在做一些看起来或多或少像这样的事情:

window.ReadingListView = Backbone.view.extend

   el: '#reading_list'

   render: ->
     @el.empty()
     @collection.each (list_item) ->
       @el.append( new ReadingListItemView(list_item).render().el() )

window.ReadingListItemView = Backbone.View.extend

  events: {
    "click .js-mark-read" : "markRead"
    "click .js-mark-dismissed" ; "markDismissed"
  }

  markRead: ->
    @model.markRead()
    $el.fadeOut
    @resetCollection

  markDismissed: ->
    @model.markDismissed()
    $el.fadeOut
    @resetCollection

  resetCollection: ->
    // to trigger a redraw, I really do this:
    window.reading_list_collection.reset()

  • ReadingListItem
    s的集合(主干模型)
  • 表示
    阅读列表的视图(主干元视图)
  • 表示一个
    ReadingListItem
    本身的视图,此视图上的绑定直接与模型交互
  • 这是一个模型,视图如下所示:

    window.ReadingListView = Backbone.view.extend
    
       el: '#reading_list'
    
       render: ->
         @el.empty()
         @collection.each (list_item) ->
           @el.append( new ReadingListItemView(list_item).render().el() )
    
    window.ReadingListItemView = Backbone.View.extend
    
      events: {
        "click .js-mark-read" : "markRead"
        "click .js-mark-dismissed" ; "markDismissed"
      }
    
      markRead: ->
        @model.markRead()
        $el.fadeOut
        @resetCollection
    
      markDismissed: ->
        @model.markDismissed()
        $el.fadeOut
        @resetCollection
    
      resetCollection: ->
        // to trigger a redraw, I really do this:
        window.reading_list_collection.reset()
    
    
    这是可行的(注意,我编写了这段代码,但没有实际运行它,所以可能有点错误,但从概念上讲,这就是我现在拥有的)

    以下是我的问题:

  • 在模型上定义非CRUD的动词似乎违反了主干“正常用法”,我没有幸运地找到任何关于如何处理这个问题的信息(以不破坏模型的方式对模型进行操作)

  • 集合如何知道某个模型是否发生了“某件事”(当某件事未被创建/删除时)

  • 有没有更好的方法来模拟这个列表

  • 当观察列表太空时,它应该从服务器上刷新自己,它预先在JSON中添加了约20个项目,实际上只显示前10个项目。(我可能会把这一切都变成JSON,因为为页面添加种子并不是什么性能上的胜利)

  • 还有一些事情发生了,在
    markRead
    /
    markDismised
    页面上的另一个视图被告知从服务器重新下载列表,以显示阅读列表的摘要计数器,我想这是否绑定到驱动
    ReadingListView


  • 如果有任何不清楚的地方,请随时发表评论,我知道SO不适合在没有具体错误信息的情况下提出开放式问题,但我想我要睡觉了;(我稍后会回答这个问题大约2)您可以收听集合上的
    change
    事件,甚至是
    change:attribute
    事件,只需绑定它
    collection.on('change:attribute',this.onChange,this)。。。没有为此创建答案,但这至少可以帮助您。因此,可以将模型的属性标记为
    已标记的
    和/或
    已解除的
    ,为这些操作处理AJAX,集合可以管理其内部状态,需要时刷新?您还可以定义和触发自己的事件,以便
    markRead
    可以触发
    “标记为已读”
    event什么是更好的做法?我宁愿主要遵循主干网的最佳实践(只要一个年轻的框架能够做到这一点),将我的问题建模为删除/创建自己列表中的“已读”和“已驳回”项