2

私はbbjsを使用して最初のアプリに取り組んでいます.10個のチュートリアルと無限のソースの後、コード設計を考え出そうとしています.

ビューとテンプレートのベスト プラクティスは何ですか。また、私が苦労しているイベントの問題もあります。私が理解しているように、ビューは 1 つの要素とその内容 (および他のサブビュー) を担当する必要があります。コードを管理可能、テスト可能などにするために、要素/テンプレートは作成時にビューに渡されます。私のアプリ Imho では、表示される要素には多くの「状態」と状態ごとに異なるテンプレートがあるため、ビューはテンプレートを保持する必要があります。状態が変化したら、新しいビューを作成するのが最善だと思いますが、新しい要素でビュー自体を更新することは可能ですか?

App.Box = Backbone.Model.extend({
    defaults: function() {
        return {
            media: "http://placehold.it/200x100",
            text: "empty...",
            type: "type1"
        };
    }
});


App.BoxView = Backbone.View.extend({
    template: {},
    templates: {
            "type1": template('appboxtype1'),
            "type2": template('appboxtype2')
    },
    events: {
      'click .button': 'delete'
    },
    initialize: function(options) {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);

        this.render();
    },

    render: function() {
        this.template = this.templates[ this.model.get("type") ];

        // first method
        this.$el.replaceWith(  $($.parseHTML(this.template(this)))  );
        this.$el.attr("id", this.model.cid);

        // second method
        var $t_el = this.$el;
        this.setElement( $($.parseHTML(this.template(this))) );
        this.$el.attr("id", this.model.cid);
        $t_el.replaceWith(  this.$el  );
        this.delegateEvents();

        //$('#'+this.model.cid).replaceWith(  $(g.test.trim()) );


        //! on the second render the events are no longer bind, deligateEvents doesn't help


        return this;
    },

    // get values
    text: function() { return this.model.get('text');  },
    media: function() { return this.model.get('media');  },
    delete: function() {
        this.model.destroy();
    }
});

ありがとう！:)

4

3 に答える 3

1

ビューのルート要素 ($el) を置き換えようとする代わりに、そのコンテンツを置き換えるだけです。

this.$el.html(this.template(this));

イベントは引き続き機能するはずです。

于 2013-02-02T09:17:31.477 に答える
1

これを試して

render: function() {
    html = '<div>your new html</div>';
    var el = $(html);
    this.$el.replaceWith(el);
    this.setElement(el);
    return this;
}

$.replaceWith は、DOM 内の要素のみを置き換えます。しかし、 this.$el は、現在置き換えられている古い要素への参照を保持しています。this.$el フィールドを更新するには、this.setElement(..) を呼び出す必要があります。setElement を呼び出すと、undelegateEvents および delegateEvents イベントも実行されます。

于 2018-03-13T01:19:57.613 に答える
0

私はこの解決策を思いつきました: http://jsfiddle.net/Antonimo/vrQzF/4/

誰かがより良いアイデアを持っている場合は、いつでも歓迎します!

基本的に、ビューで：

        var t_$el = this.$el;
        this.$el = $($.parseHTML(this.template(this)));
        this.$el.attr("id", this.cid);
        if (t_$el.parent().length !== 0) { // if in dom
            this.undelegateEvents();
            t_$el.each(function(index, el){ // clean up
                if( index !== 0 ){ $(el).remove(); }
            });
            t_$el.first().replaceWith(this.$el);
            this.delegateEvents();
        }
于 2013-02-07T14:40:42.000 に答える