0

オブジェクトのリストを表示する単純なテーブルがありますが、ユーザーがログインしている場合に[編集]ボタンが表示されるようにブール値を渡したいのですが、パラメーターをlistItemとして渡そうとしましたが、できませんでした。誰でもこれに光を当てることができますか？

明確化: テンプレート内から値にアクセスできるようにしたい

       var TableView = {};

    TableView.RowItemView = Marionette.ItemView.extend({
        tagName: "tr",
        template:$('#table-template-item').html(),

        //if required add events and triggers here.
        events: {
            "click td a.js-show": "showClicked",
            "click td a.js-edit": "editClicked"
            }

       });

    TableView.MainTable = Marionette.CompositeView.extend({
        tagName: "table",
        className: "table table-hover",
        template: $('#table-template').html() ,
        itemView: TableView.RowItemView,
        itemViewContainer: "tbody"

    });

   return TableView;

    InitialController.home = function () {
    console.log("initializing application layout");
    var list = new PropertiesModel.ContactCollection;
    list.fetch({reset: true});
    var tableView = new TableView.MainTable({
        collection: list
    });

    app.mainRegion.show(tableView);

};
4

3 に答える 3

3

アプリケーションには、ユーザーがログインしているかどうかがわかる場所があると思います。議論のために、User オブジェクトにアタッチされた関数にカプセル化され、それがグローバル App にアタッチされていると仮定しますMyApp.CurrentUser.isLoggedIn()。

RowItemViewとる方法の 1 つは、とこのCurrentUserオブジェクトの間に依存関係を追加することです。RowItemViewユーザーがログインしている場合にテストをレンダリングし、それに応じてビューを更新するとき。

ここでコードについて多くの仮定を立てていますが、このスニペットは基本的な考え方を示しているはずです:

  onRender: function() {
    if (MyApp.CurrentUser.isLoggedIn()) {
      this.$('.js-edit').removeClass('hidden');
    }
  }

補遺

ビューの複数のセクションを更新したいですか? templateHelpers プロパティを使用してみてください。

TableView.RowItemView = Marionette.ItemView.extend({

  template: /* resolves to: */ '<td><%= getItemOne() %></td>' +
                             '<td><%= getItemTwo() %></td>',
  templateHelpers: {
    getItemOne: function() {
        if (window.isLoggedIn) {
            return 'Logged In Content';
        }
        return 'Not Logged In Content';
    },
    getItemTwo: function() {
        if (window.isLoggedIn) {
            return 'Logged In Content';
        }
        return 'Not Logged In Content';
    }
}

グローバル名前空間にあると言うのでisLoggedIn、渡す必要はありません。ただし、渡す必要がある場合は、次を試してください。

TableView.RowItemView = Marionette.ItemView.extend({
  initialize: function(options) {
    this.templateHelpers.isLoggedIn = options.isLoggedIn;
    // ... other work as needed
  },
  templateHelpers: {
    getItemOne: function() {
        if (this.isLoggedIn) {} // should work now
    }
  }

このアプローチの問題点は、CompositeView から変数を渡していることです。つまり、CompositeView のbuildItemViewプロパティをオーバーライドする必要があります。これは、率直に言って、その価値よりも多くの作業のように思えますが、試してみたい場合のスニピットを次に示します。

TableView.MainTable = Marionette.CompositeView.extend({
  initialize: function(collection, options) {
    this.isLoggedIn = options.isLoggedIn;
    // ...
  },
  buildItemView: function(item, ItemViewType, itemViewOptions){
    var options = _.extend({model: item, isLoggedIn: this.isLoggedIn }, itemViewOptions);
    return new ItemViewType(options);
  },
于 2013-09-05T06:00:17.460 に答える
0

ItemViewOptions複合/コレクションビューによってレンダリングされる各アイテムビューに、関数 (動的) またはオブジェクト (静的) として提供できます。

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemviewoptions

TableView.MainTable = Marionette.CompositeView.extend({
    itemViewOptions: function(){
        return {
            isLoggedIn: //true/false
        };
    },
    //snip...
}

CollectionView/に設定したらCompositeView、 で次のようにしてそれらを取得できますItemView。

initialize: function(options){
    var x = options.isLoggedIn;
}

編集:または、テンプレートで表示するには<%=isLoggedIn%>

initialize: function(options){
    this.model.set('isLoggedIn', options.isLoggedIn || false);
}
于 2013-09-05T08:25:31.693 に答える
0

すべての行が編集可能または編集不可になるようです。したがって、あなたのニーズにより適していると私が思う別の答えがあります。オプションを渡してすべて ItemViewのロジックを実行する必要がなくなりますが、別のビュータイプが必要になります

TableView.RowItemView = Marionette.ItemView.extend({
    template:'#table-template-item',
    //...snip
});

TableView.EditableRowItemView = TableView.RowItemView.extend({
    template:'#editable-table-template-item',
});

TableView.MainTable = Marionette.CompositeView.extend({
    initialize: function(){
        if(isLoggedIn){ //true/false
            this.itemView = TableView.EditableRowItemView
        }
    },
    itemView: TableView.RowItemView
}

EditableRowItemViewロジックはTableView.RowItemViewほぼ同じですが、テンプレートが異なります (および追加の編集ロジックがある可能性があります) 。

于 2013-09-05T22:12:47.517 に答える