使用Backbone.js创建动画后的HTML元素

Question

我的代码如下。在这种情况下，如何使用动画等JQuery调整元素的大小？详细信息将作为注释写入代码中。

模板：

<script id="content_template" type="text/template"> 
     <div 
       class="content" 
       style="position: absolute; 
        top:<%= top %>px; 
        left:<%= left %>px; 
        width:<%= width %>px; 
        height:<%= height %>px; " 
     ></div> 
</script> 

型号：

var FrameObject = Backbone.Model.extend({ 
    defaults: { 
     top: 0, 
     left: 0, 
     width: 1, 
     height: 1 
    } 
}); 

收藏：

var FrameObjects = Backbone.Collection.extend({ 
    model: FrameObject 
}); 

对象视图：

var Object_view = Backbone.View.extend({ 
    template: _.template($("#content_template").html()), 
    render:function(){ 
     return this.template(this.model.toJSON()); 
    } 
}); 

对象容器视图：

var App_view = Backbone.View.extend({ 
    el: $(".container"), 
    events: { 
     "click .container": "create_object" 
    }, 
    create_object: function(event){ 
     var frame_object = new FrameObject({ 
      top: event.pageX, 
      left: event.pageY, 
      width: 100, 
      height: 100 
     }); 
     frame_objects.add(frame_object); 

     var object_view = new Object_view({model: frame_object}); 
     this.$(".container").append(object_view.render()); 

     /* here I want to change the 'top' & 'left' attributes of the object model 
      and want my object_view to animate to that position. Same as it would do for - 

      someElement.animate({top: newTop, left: newLeft}); 
     */ 
    } 
}); 

Answer 1

我写了一个简单的例子：

var FrameObject = Backbone.Model.extend({ 
    defaults: { 
     top: 0, 
     left: 0, 
     width: 1, 
     height: 1 
    } 
}); 

var FrameObjects = Backbone.Collection.extend({ 
    model: FrameObject 
}); 

var ObjectView = Backbone.View.extend({ 
    className: 'frame', 

    initialize: function() { 
     this.model.on('change', this.animate, this); 
    }, 

    render: function() { 
     var params = _.extend(this.model.toJSON(), { position: 'absolute' }); 
     this.$el.css(params); 
     return this; 
    }, 

    animate: function() { 
     this.$el.animate(this.model.toJSON()); 
    } 
}); 

var AppView = Backbone.View.extend({ 
    el: $("#container"), 

    events: { 
     "click": "createObject" 
    }, 

    createObject: function(event) { 
     var frameObject = new FrameObject({ 
      top: event.pageY, 
      left: event.pageX, 
      width: 100, 
      height: 100 
     }); 

     var frameObjects = new FrameObjects(); 

     frameObjects.add(frameObject); 

     var objectView = new ObjectView({ 
      model: frameObject 
     }); 
     this.$el.append(objectView.render().el); 

     setTimeout(function() { 
      frameObject.set({ 
       // 500 — width of #container 
       top: Math.random() * 500, 
       left: Math.random() * 500 
      }) 
     }, 1000); 
    } 
}); 

var appView = new AppView(); 

http://jsfiddle.net/theotheo/4Y8gy/

通知我做了一些改变你的鳕鱼即首先，我改变events散列APPVIEW的，或更精确地予省略selector，because

省略选择器导致要绑定到视图的根元素（this.el）事件。

看起来好像它正是你想要的。其次，我删除了ObjectView的模板。当然，您可以使用它，但在这种情况下，我认为这不是必需的。第三，我改名变量for the sake of consistency。 随意问。