0

我有一个显示对象列表的简单表，但是我想传递一个布尔值，以便如果用户登录他可以看到 [edit] 按钮，我尝试将参数作为 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().

您可以采取的一种方法是在 theRowItemView和 thisCurrentUser对象之间添加依赖关系。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

似乎每一行都是可编辑的或不可编辑的。所以这是我认为更适合您需求的另一个答案。它将防止您必须在every 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 回答