1

私はバックボーンを初めて使用し、何かに頭を悩ませています。私がやろうとしていることを説明してみましょう: 内部に SVG グループを持つ SVG 要素を持つアプリを作成しています。グループは、次のように互いにネストされます。

http://i.stack.imgur.com/yAkTE.png

Backbone を使用して、各グループのモデルとビューを作成しようとしていました。コレクションを使用して、これらの内部に子グループをネストします。

これまでのところ、SVG の代わりに div を使用して次のように記述し、その側面を実装する前にロジックが機能するようにしました。しかし、私の考えはおそらくどこかで完全に不安定であり、どんな助けも大歓迎です。

バックボーンのネスティングなどについて同様のスレッドがあることは知っていますが、それらのヘルプを見つけることができませんでした。

これまでに書いた JSFiddle をここで見ることができます: http://jsfiddle.net/ZqMeV/ これまでのコードは次のとおりです。

(function ($) {

var Cell = Backbone.Model.extend({

    initialize: function(){
        this.children = new CellCollection();
    }

});

var CellCollection = Backbone.Collection.extend({
    model: Cell
});

var CellView = Backbone.View.extend({
    tagName: "div",

    initialize: function(){
        if(this.model.children.models.length > 0){
            _.each(this.model.children.models, function(child){
                console.log(child);
                var cell = new CellView({
                    model: child
                });
                $(this.el).append(cell.el);
            });
        } else {
            $(this.el).html('cell');
        }
    }

});

var Canvas = Backbone.Model.extend({
    initialize: function(){
                    //below is just for testing purposes
        this.content = new Cell();
        var c = new Cell();
        var d = new Cell();
        var e = new Cell();
        this.content.children.add(c);
        this.content.children.add(d);
        d.children.add(e);
    }
});

var CanvasView = Backbone.View.extend({
    el: $("#canvas"),
    tagName: "div",
    initialize: function(){
        this.cellView = new CellView({
            model: this.model.content
        });
        $(this.el).append(this.cellView.el);
    }
});

var canvas = new Canvas();
var canvasView = new CanvasView({
    model: canvas
});

} (jQuery));

ありがとう

4

1 に答える 1

0

あなたは非常に大きなコンテキストの問題を抱えています: 

_.each(this.model.children.models, function(child){
  console.log(child);
  var cell = new CellView({
    model: child
  });
  $(this.el).append(cell.el);
});

ここであなたのthis内面はそれぞれ変わりました。次のように置き換えることができます。

var self = this;
this.model.children.each(function(child) {
  var cell = new CellView({
    model: child
  });
  $(self.el).append(cell.el);
});

ところで、Backbone の Collections は多くのアンダースコア メソッドをプロキシするので、自由にそれぞれを変更しました。で置き換えることもできthis.model.children.models.lengthますthis.model.children.length。内部の配列だけでなく、コレクションの使用方法を学びます:)

于 2013-04-02T12:27:07.093 に答える