Question

我有一个MarionetteJS应用程序，它利用CompositeView显示数据表。我想要做的是根据相关模型是否处于特定状态，隐藏所有ItemView中的“删除”按钮。我可以使用LayoutView轻松完成此操作，因为在我的程序流程中，我可以简单地进行检查（其中菜单是另一个带有一些按钮的视图。

   if (ModelIsEditable)
   {
       myLayout.menuRegion.show(menu);
   }

我如何用CompositeView / ItemViews完成同样的事情？

到目前为止我的代码：

CompositeView中：

（模板）

<script type="text/template" id="data-items-table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Number</th>
            <th>Default</th>
            <th class="no-sort">Actions</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot></tfoot>

</script>

（适用视图）

List.DataItems = Marionette.CompositeView.extend({
    className: "table table-condensed",
    tagName: "table",
    template: "#data-items-table",
    childView: List.DataItem,
    childViewContainer: "tbody"
}

ItemView（模板）：

<script type="text/template" id="data-item-row">
    <td><%= Title%></td>
    <td><%= Number%></td>
    <td>
    <label class="checkbox-inline">
        <input type="checkbox" value="<%= IsDefault %>">
    </label>

    </td>
    <td class="js-menu-region">
        <a class="btn btn-danger btn-x">
            <i class="fa fa-trash-o"></i> Remove
       </a>
    </td>
</script>

（适用视图）

List.CostCenterFundNumber = Marionette.ItemView.extend({
    tagName: "tr",
    template: "#data-item-row",

    ui: {
        "confirm": ".js-behavior-confirmable",
        isdefault: "input[type=checkbox]"
    },

    events: {
        "change @ui.isdefault": "toggleDefault"
    },

    toggleDefault: function () {
        if (this.ui.isdefault.prop('checked') == true) {
            this.model.set("IsDefault", true);

        } else if (this.ui.isdefault.prop('checked') == false) {
            this.model.set("IsDefault", false);
        }

        this.trigger("item:toggleDefault", this.model);
    },

    onRender: function () {

        if (this.model.get('IsDefault')) {
            this.ui.isdefault.prop('checked', true);
        }

    }

});

Answer 1

如果要根据itemView模型的状态或其他模型的状态隐藏删除按钮。

您可以使用if语句将删除按钮封装在模板中。 “例如showRemove”。您可以通过覆盖itemView的serializeData方法将showRemove变量提供给模板。 http://marionettejs.com/docs/v2.4.2/marionette.itemview.html#itemview-serializedata

基本上它看起来像这样

serializeData: function () {
    var data = this.model.toJSON();
    data.showRemove = this.model.get('is_editable'); // or anotherModel.get('is_editable');
    return data;
}

现在，为了在修改模型时实时更新itemView，您需要侦听 itemView模型的更改并触发重新渲染。在itemView

中有类似的东西

modelEvents: {
    "change:is_editable": "render"
},

如果您正在收听的更改来自其他模式，则在itemView的initialize方法中，您可以使用http://backbonejs.org/#Events-listenTo

initialize: function (){
    this.listenTo(anotherModel, 'change', this.render);
}

作为旁注，这是为了让您入门，但是对于性能问题，重新渲染整个视图以仅更新其中的一部分，并不总是最佳选择，尤其是如果这是一个大视图。您可能希望在itemView中触发特定方法，该方法将在选择器的帮助下处理显示/隐藏/销毁/恢复特定部分，或者使用css类显示/隐藏。

隐藏木偶项目视图中的按钮

1 个答案: