1

ここに示されているアプリケーションは実際のアプリケーションではなく、問題を説明することだけを目的としており、David Sulc の本に示されている contactmanager アプリケーションの精神で作成されています。

アプリケーションのレイアウトを示す画像

上の画像のアプリケーションは、次のことを実行できます。
- 起動時に、リージョン 1 のみが表示されます
。 - ユーザーは、コレクション内の最初の連絡先も作成する写真をアップロードできます。
- アップロードが完了すると、リージョン 2 と 3 がアクティブになります。
- 領域 2 では、ユーザーは画像をトリミングし、連絡先の属性 (名前/年齢など) を変更できます。
- 領域 3 では、作成されたすべての連絡先の collectionView が表示され、新しい連絡先を作成するためのボタンが表示されます。
- 領域 3 のすべてのエントリに、上記のビューに連絡先をロードする編集があります。
- 2 番目 (またはそれ以降) の連絡先を追加する場合、領域 2 は、新しい画像がアップロードされるまで無効になります。

技術的なアプローチ
- 連絡先モデルと連絡先モデルを用意します。
- 地域のビューを変更しないので、ルーターを使用する予定はありません。
- 現在アクティブなモデルを追跡する方法があります。

コード 

// File: js/app.js  

// Define application  
var ContactManager = new Marionette.Application();

// Define regions
ContactManager.addRegions({
  firstRegion: "#first-region",
  secondRegion: "#second-region",  
  tirdRegion: "#third-region"
});

// Itemviews (usually in modules, but for short it's here)
var region1View = Marionette.ItemView.extend({
    template: "#a-template",
    model: ContactManager.request("contacts:active");
});  
ContactManager.firstRegion.show(region1View);

.

//File: js/apps/entities/canvas.js  
ContactManager.module('Entities', function (Entities, ContactManager, Backbone, Marionette, $, _) {
    Entities.Contact = Backbone.Model.extend({
        defaults: {
            fileName: '',
            name: ''
        },
        change: function() {
            console.log('bla');
        }
    });

    Entities.contactCollection = Backbone.Collection.extend({
        model: Entities.Contact
    });

    var contacts;
    var activeCanvasCID;
    var initializeCanvas = function () {
        contacts = new Entities.CanvasCollection([
            {
                name: "John Doe"
            }
        ]);
    };

    var API = {
        getContactEntities: function () {
            return contacts;
        },
        getActiveContactsEntity: function () {
            if (!contacts) {
                // if we don't have any contacgts yet, create the first
                initializeContact();
            }
            if (activeContactCID === undefined) {
                // No active contact yet, get the first model from collection
                activeContactCID = contacts.at(0).cid;
            }
            return contact.get(activeCanvasCID);
        },
        setActiveContactsEntity: function (cid) {
            if (activeContactCID !== cid) {
                activeContactCID = cid;
                ContactManager.vent.trigger("ActiveCanvasChanged");
            }
        }
    };

    ContactManager.reqres.setHandler("contacts:entities", function () {
        return API.getContactEntities();
    });

    ContactManager.reqres.setHandler("contacts:active", function () {
        return API.getActiveContactsEntity();
    });

    ContactManager.commands.setHandler("contacts:setActiveEntity", function(cid){
        API.setActiveContactsEntity(cid);
    });
});

免責事項: いくつかの構文エラーがあるかもしれませんが、これは半疑似コードです

たとえば、他のモジュールで次のことを行う場合 (たとえば、画像がアップロードされていて、現在アクティブなモデルにファイル名を設定したい場合): 

 var activeModel = ContactManager.request("contacts:active");
 activeModel.set("fileName","image.png");

問題
現在、後者を実行すると、変更 (console.log) イベントが発生しません。また、この activeModel も参照する itemView は更新されません。これが事実である理由は何ですか？

設計上の問題
これは、ルーターを必要としないアプリを設計する正しい方法ですか (または、間違った仮定でもあります)。それとも別のアプローチをとるべきですか？

4

1 に答える 1

2

Try it with the following model definition:

Entities.Contact = Backbone.Model.extend({
    defaults: {
        fileName: '',
        name: ''
    },
    initialize: function() {
        this.on("change", function(){
            console.log("model changed");
        }
    }
});

Backbone models don't have a change attribute: you need to register your callback function in an initializer.

于 2013-09-13T19:01:42.370 に答える