0

モーダルを呼び出すボタンを作成するためのスペースバー テンプレートがあります。

{{#bootstrapModal
    triggerLabel="Delete"
    triggerIcon="fa-trash-o"
    triggerClass="btn-danger"
    id="deleteModal"
    title="Delete Item"
    closeLabel="No"
    primaryLabel="Delete it!"
    infoId="item123"
    infoName="Document 123"
}}
Are you sure you want to delete?
{{/bootstrapModal}}

bootstrapModal テンプレート:

<template name="bootstrapModal">
<button class="btn {{triggerClass}}" data-toggle="modal" data-target="#{{id}}">
    {{#if triggerIcon}}
        <i class="fa {{triggerIcon}}"> {{triggerLabel}}</i>
    {{/if}}

</button>
<div class="modal fade" id="{{id}}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{title}} {{infoName}}</h4>
            </div>
            <div class="modal-body">
                {{> UI.contentBlock}}
                <b>{{infoName}}</b>
            </div>
            <div class="modal-footer">
                {{#if closeLabel}}
                <button type="button" class="btn btn-default" data-dismiss="modal">{{closeLabel}}</button>
                {{/if}}
                <button type="button" class="btn btn-primary">{{primaryLabel}}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ボタンを作成し、それにモーダルを割り当ててから、ヘルパーを使用してモーダルに機能を割り当てます。

私は優れたリアクティブ テーブル パッケージと fn 機能https://github.com/ecohealthalliance/reactive-table#virtual-columnsを使用しています。関数内でハンドルバー/スペースバー {{ }} 構文を使用できないため、オブジェクトをパラメーターとして使用してテーブルセルに挿入したいと思います。誰かが私を正しい方向に向けることができますか? 以下にいくつかのコードがあります...

{ key: 'hello', label: "Tools", fn: function(value, object) {
                var context = {
                    triggerLabel: "Delete",
                    triggerIcon: "fa-trash-o",
                    triggerClass: "btn-danger",
                    id: "deleteModal",
                    title: "Delete Item",
                    closeLabel: "No",
                    primaryLabel: "Delete it!",
                    infoId: object._id,
                    infoName: object.name
                }

                // how to insert the context object into the bootstrapModal spacebars template in raw JS?

}

Meteor は比較的新しいものですが、手がかりはありますか?

4

1 に答える 1

0

ヘルパーを使用して#with、Handlebars の現在のコンテキストを変更できます。

{{#with context}}
  {{#bootstrapModal}}
    ...
  {{/bootstrapModal}}
{{/with}}
于 2014-08-18T13:31:49.577 に答える