0

我在 requirejs 和主干中有一个应用程序，当我单击一个元素时，我会在页面中添加可拖动和可调整大小的 div 并将该元素插入集合中。如果我调整或拖动元素的大小，我想上传具有新值的元素数据，例如 div 或高度。有可能吗？

这是我的看法？

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;
});
4

1 回答 1

1

您可以这样做，因为您将事件设置为您的主干模型或集合。

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

通过您的示例，我想您想为 every 使用视图实例Design，所以这就是您在initialize方法内执行所有操作的原因。

在这种情况下the collection shouldn't be here，也许在 aparent 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});
            }
        });
    }
});

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

于 2013-08-08T20:19:48.487 回答