meteor - Meteor はネストされたビューを処理できますか?

Question

私は流星を学んでいて、ネストされたサブビューを扱うあらゆる種類の困難を見つけています。書きたいアプリがいっぱいなので… 難しそうです。この問題に対処するための Meteor プロジェクトの readme として、github でこれを見つけました。「Meteor を数週間いじってみました。セットアップの容易さと強力な反応性により、これを使い続けたいと思っています。しかし、サブビューをプログラムで構成、インスタンス化、破棄、およびネストすることの難しさに不満を感じていました。」

これは Meteor で処理できる問題ですか (多くの複雑な回避策を追加する必要はありません)、それとも別のプラットフォームを探す必要がありますか?

score 0 · Accepted Answer

テンプレートの入れ子が大好きです。信頼できる結果が得られます。私は現在、html を構成するテンプレートとヘルパー関数 (通常はフォーム要素用) の両方のライブラリをプログラミングしています。HTML は副産物であり、.html と呼ばれるファイルは実際には JavaScript DSL です。

人々に問題を与えるソートされたリストへの挿入について提起された多くのSOの問題があります。見る時間がありませんでした。

私の経験則: Meteor は (よく) 最初からこれを簡単かつ確実に行うように設計されています。

これまでのところ解決が困難だったのは、ファウンデーションからアコーディオンを追加したときで、ドキュメントを更新すると初期状態 (すべてが閉じているか、1 つ開いている) になりました。現在のセクションを保存するコードと、それを使用するテンプレートのレンダリングされたコールバックで再アサートするコードを挿入する必要がありました。

場所に 1 つまたは 2 つのフィールドだけでネスティングのプロトタイプを作成し、気になる点を見つけてみませんか?

これがチェーンのサンプルです。ネストされたすべてのテンプレートが表示されます。このテンプレート自体は複数で実行されています。

最初のテンプレート: 鉄のルーターによって提案された「レイアウト」と呼ばれます。基本ページとメニューがあります。本体は歩留まり、ルーターで設定。サンプルページでは、ルートコールテンプレート「availability」

<template name='availability'>
  {{#each myAgents}}
  <form class="custom" id="Agent_{{_id}}" action="">
    <div id='availability' class="section-container accordion" data-section="accordion">
      <section id="services">
        <p class="title" data-section-title><a href="#">
          Your Info
        </a></p>

        <div class="content" data-section-content>
          {{>services}}
        </div>
      </section>
      <section id="skills">
        <p class="title" data-section-title><a href="#">
          Skills
        </a></p>

        <div class="content" data-section-content>
          {{>skills}}
        </div>
      </section>
      <section id="sureties">
        <p class="title" data-section-title><a href="#">
          Sureties
        </a></p>

        <div class="content" data-section-content>
          {{>sureties}}
        </div>
      </section>
      <section id="time">

        <p class="title" data-section-title><a href="#">
          Time Available
        </a></p>

        <div class="content" data-section-content>
          {{>time}}
        </div>
      </section>
      <section id="schedule1">

        <p class="title" data-section-title><a href="#">
          Schedule 1
        </a></p>

        <div class="content" data-section-content>
          {{>schedule}}
        </div>
      </section>
      <section id="schedule2">

        <p class="title" data-section-title><a href="#">
          Schedule 2
        </a></p>

        <div class="content" data-section-content>
          {{>schedule}}
        </div>
      </section>
      <section id="distance">

        <p class="title" data-section-title><a href="#">
          Distance
        </a></p>

        <div class="content" data-section-content>
          {{>distance}}
        </div>
      </section>
    </div>
  </form>
  {{/each}}
</template>

さらなるネストのサンプル:

<template name='services'>
  {{label_text fname='name' title='Agent Name' placeholder='Formal Name' collection='agent'  passthrough='autofocus=autofocus ' }}
  {{label_text fname='agentInCharge' title='Agent In Charge' placeholder='Owner' collection='agent'   }}
  {{label_text fname='phone' title='Phone Number(s)' placeholder='Include Area  Code'collection='agent'   }}
  {{>gps }}

  <h4>Not shared:</h4>
  {{label_text fname='email' title='Email:' placeholder='you remain anonymous' collection='agent' }}

</template>

label_text はhttps://github.com/mcrider/azimuthプロジェクトから学んだヘルパーです。

generateField = (options) ->
  options.hash.uniqueId = options.hash.fieldName + "_" + Math.random().toString(36).substring(7)  if options.hash.template is "wysiwyg"
  options.hash.id = options.hash.id or @_id
  options.hash.value = options.hash.value or this[options.hash.fname]

  # allow for simple params as default
  options.hash.title = options.hash.title or options.hash.fname
  options.hash.template = options.hash.template or "label_text"
  options.hash.placeholder = options.hash.placeholder or options.hash.title

  # compatible with old
  options.hash.fieldName = options.hash.fieldname or options.hash.fname
  options.hash.label = options.hash.label or options.hash.title

  # FIXME: Return error if type not valid template
  new Handlebars.SafeString(Template[options.hash.template](options.hash))



Handlebars.registerHelper "label_text", (options) ->
  options.hash.collection = options.hash.collection or 'generic'  
  generateField.call this, options

score 0 · Accepted Answer

私は Meteor にかなり慣れていませんが、ネストされたビュー (別名、動的インクルードまたはサブテンプレート) が必要であることがすぐにわかりました。これがあなたの言いたいことかどうかはわかりませんが、これが私の解決策です。

サブテンプレートの作成に使用できる次のハンドルバーヘルパーを作成しました。

Handlebars.registerHelper('subTemplate', function(container, property, context, options) {
    if (container && container.hasOwnProperty(property)) {
        var subTemplate = container[property];
        if (typeof subTemplate === 'function') {
            return new Handlebars.SafeString(subTemplate(context || this));
        }
        else if (typeof subTemplate === 'string') {
            return new Handlebars.SafeString(Template[subTemplate](context || this));
        }
    }
});

これは、私がジェネリックテンプレートと呼んでいるものの中で使用できます。たとえば、リストを作成するには:

<template name="item_list">
    <ul class="items-list">
        {{#each items}}
            <li class="listview-item">
                {{subTemplate .. 'listItem' this}}
            </li>
        {{/each}}
    </ul>
</template>

この汎用テンプレートを呼び出すには、'listItem' プロパティがそのコンテキスト内に存在する必要があります。これは、サブテンプレートの名前を含む文字列、またはサブテンプレートのインライン定義のいずれかです。以下の例は、両方のオプションを示しています。

<template name="my_list">
    {{! First option, referring to the sub-template by name:}}
    <div>
        {{#with listData listItem="my_list_item"}}
            {{> item_list}}
        {{/with}}
    </div>

    {{! Second option, inlining the sub-template:}}
    <div>
        {{#with listData}}
            {{#assignPartial 'listItem'}}
                <span>{{name}}</span>
            {{/assignPartial}}
            {{> item_list}}
        {{/with}}
    </div>
</template>

<template name="my_list_item">
    <span>{{name}}</span>
</template>

Template.my_list.listData = function() {
    return {
        items: collections.people.find()
    };
};

2 番目のオプションでは、追加のハンドルバーヘルパーが必要です。

Handlebars.registerHelper('assignPartial', function(prop, options) {
    this[prop] = options.fn;
    return '';
});

私はこれらの種類の便利なヘルパーをさらに作成しました。いつか GitHub で共有する予定です。

meteor - Meteor はネストされたビューを処理できますか?

2 に答える 2

Related

Reference