6

Backbone.jsのページで次を読みました。

多くの JavaScript を使用する Web アプリケーションで作業する場合、最初に学ぶことの 1 つは、データを DOM に結び付けることをやめるということです。HTML UI、JavaScript ロジック、およびサーバー上のデータベース間でデータの同期を必死に維持しようとする、jQuery セレクターとコールバックの絡み合った山となる JavaScript アプリケーションを作成するのは非常に簡単です。リッチなクライアント側アプリケーションの場合、より構造化されたアプローチが役立つことがよくあります。

上記の文章を完全に理解しているかどうかはわかりません (Backbone.js を使用する必要性を完全に理解しているかどうかもわかりません)。

データを DOM に結び付ける例と、Backbone.js がそれを解決する方法を誰か教えてもらえますか?

編集：

これはその例ですか？

jQuery(document).ready(function($) {
  // Header
  jQuery('#header #searchbox').attr('placeholder', '<?php echo pll__("Header Search Field"); ?>');

(etc...)

（phpでそれを行う方法がわからなかったので、私が使用したハックです）。

そのため、ID を変更し#searchboxたり、その位置を移動したりすると、コードは再び機能しなくなります。上の文章はそれを指しているのでしょうか。

4

1 に答える 1

1

プロジェクトの名前を編集できるモーダル編集ボックスを表示するバックボーンを使用して、何かを実行しました。この名前はメインページにも表示されているので、同時に更新したいと思います。しかし、DOM要素を識別して、編集の結果で直接更新したくありません。代わりに、バックボーンモデルを作成します。

this.newModel = new app.Project({model: this.model});

次に、新しいモデルで変更がないか、この場合はproject_name属性をリッスンします。

this.listenTo(this.newModel, 'change:project_name', this.updateName);

次に、「newModel」を使用して新しいビューを作成します

modal = new app.ProjectModal({
            model: this.newModel,
        });

次にこれが表示され、モーダルビューで名前が変更されると、「this.updateName」関数が「親」ビューでトリガーされるため、実際のDOM要素がどこにあるかを特定する必要がなくなります。

'parent'関数全体は次のようになります。

    app.ProjectCardView = Backbone.View.extend({

        tagName: 'article',
        className: 'project',

        template: _.template( $("#tpl-project-card-summary").html() ),

        events: {
            'click .settings-btn': 'showProjectModal'
        },

        initialize: function() {

            //a slightly different model is used to populate project than this card...
            this.newModel = new app.Project({model: this.model});
            return this;
        },

        render: function() {

            this.$el.html( this.template(this.model.toJSON()) );
            return this;
        },

        showProjectModal: function (e) {

            this.listenTo(this.newModel, 'change:project_name', this.updateName);

                this.modal = new app.ProjectModal({
                    model: this.newModel
                });
                return this;

        },

        updateName: function() {

            if (this.modal) {
                this.$el.find('.item_name').text(this.model.get("project_name"));
            }

            return this;
        }

    });

明らかにどこかでDOMを更新する必要がありますが、今では編集から切り離されて管理が容易になっています。

于 2013-03-11T21:21:29.660 に答える