Question

我在requirejs和backbone中有一个应用程序，当我点击一个元素时，我添加到我的页面draggable和resizable div并将元素插入到集合中。如果我调整大小或拖动元素，我想要使用新值（例如div或height）上传元素的数据。有可能吗？

这是我的看法？

define(['jquery' , 
        'backbone', 
        'jquery_ui',
        'models/design', 
        'collections/design', 
        'views/element',
        "text!templates/design.html"
        ], 
    function($, Backbone, jQueryUI, DesignModel, DesignCollection, ElementView, tmplDesign){
    var DesignView = Backbone.View.extend({
        initialize: function(){
            this.$el = $('#layout');
            this.template = tmplDesign;
            console.log('initialize DesignView');
            this.collection = new DesignCollection();
            var here = this;
            $('#insert-dynamic-element').click(function(){
                            //json to the collection with data t update
                var element = { name:'img', type:'image', width:'100px', height:'50px' };
                here.collection.addElement(element);
                here.render();
                $(function() {
                    $('.drag-item').draggable({
                        snap        : true,
                        cursor      : "move",
                        delay       : 100,
                        scroll      : false,
                        containment : "parent"
                    }).resizable({
                        containment : "parent",
                        stop: function(e, ui) {
                            var width = ui.size.width;
                            var height = ui.size.height;
                                        //I want update this value of width and height into the collection
                        }
                    });
                });
            });
        },
        render: function(){
            var template = _.template(this.template, {elements:this.collection.toJSON()});
            this.$el.empty();
            this.$el.append(template);
        }
    })

    return DesignView;
});

Answer 1

您可以将事件设置为Backbone模型或集合。

Collections是Models的列表，在示例中，您已将you are adding a JSON个对象发布到集合instead of a Model。

根据您的示例，我想您希望为每个Design使用一个视图实例，因此这就是您在initialize方法中执行所有操作的原因。

在这种情况下the collection shouldn't be here，也许在parent view中，您应该只保留Model，因为您在此处使用单个对象。

好吧，也许你可以这样做：

var DesignView = Backbone.View.extend({
    initialize: function(){
        this.$el = $('#layout');
        this.template = tmplDesign;
        console.log('initialize DesignView');

        // this should be in a parent view
        // this.ParentView.collection = new DesignCollection();
        // this.ParentView.listenTo(this.ParentView.collection, 'change', this.ParentView.saveDataToServer);

        this.elementModel = null;
        var here = this;
        $('#insert-dynamic-element').click(function(){
                        //json to the collection with data t update
            var element = { designId:here.ParentView.collection.models.length, name:'img', type:'image', width:'100px', height:'50px' };
            here.elementModel = new DesignModel(element);
            here.ParentView.collection.addElement(elementModel);
            here.render();

        });
    },
    render: function(){
        var template = _.template(this.template, {here.ParentView.collection.at(here.ParentView.collection.model.length-1).toJSON()});
        this.$el.empty();
        this.$el.append(template);
        var here = this;
        $('.drag-item').draggable({
            snap        : true,
            cursor      : "move",
            delay       : 100,
            scroll      : false,
            containment : "parent"
        }).resizable({
            containment : "parent",
            stop: function(e, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                elementModel.set({ width:ui.size.width, height.size.height});
                here.ParentView.collection.set(elementModel, {remove:false});
            }
        });
    }
});

所以基本上，如果你想为每个模型使用不同的视图实例，我建议使用父视图来管理它的集合。

骨干jqueryUI更新集合

1 个答案: