4

私が持っているこのコードを以下に示します。この場合、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});
        */
    }
});
4

1 に答える 1

8

簡単な例を書きました：

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/

コードにいくつかの変更を加えたことに注意してください。まず、eventsAppView のハッシュを変更しました。より正確には を省略selectorしました。

セレクターを省略すると、イベントはビューのルート要素 ( this.el) にバインドされます。

それはまさにあなたが望むもののようです。次に、 のテンプレートを削除しましたObjectView。もちろん使えますが、今回は必要ないと思います。第三に、一貫性のために変数の名前を変更しました。遠慮なく尋ねてください。

于 2012-06-21T15:16:04.693 に答える