Pertanyaan Memuat secara dinamis template di Meteor.js


Saya ingin kemampuan memuat template secara dinamis tanpa secara eksplisit menentukan template.

Sebagai contoh:

<template name="foo">
</template>

di mana 'foo' adalah template, saya ingin kemampuan untuk memuatnya secara dinamis dengan memanggil beberapa metode:

Meteor.render(Meteor.loadTemplate('foo'));

Apakah ini mungkin?


20
2017-10-19 06:46


asal


Jawaban:


Meteor 0.9.x API Baru

Dan Dascalescu menunjukkan Meteor sekarang memiliki templat dinamis bawaan! Ini bagus karena Anda tidak perlu memasukkan kode tambahan seperti yang terlihat di versi sebelumnya.

{{> Template.dynamic template=template [data=data] }}

Untuk Meteor 0.8.x Legacy

Template Dinamis Tanpa Data: Jawaban Blaze (0.8.0) Boris Kotov yang diperbarui ada di jalur yang benar (diambil dari dokumen terbaru), tetapi tidak berfungsi sebagaimana mestinya untuk saya. Saya mendapat yang berikut untuk bekerja:

{{> dynamicTemplate name=myDynName}}

<template name="dynamicTemplate">
    {{#with chooseTemplate name}}
        {{> template}}
   {{/with}}
</template>

Template.dynamicTemplate.chooseTemplate = function (name) {
    return { template: Template[name] };
};

Saya harap ada solusi yang lebih sederhana, tetapi saya perlu membungkus Template dalam JSON seperti yang ditunjukkan. Mungkin ini akan membantu orang lain untuk maju.

Template Dinamis Dengan Data: Jika Anda memiliki dan ingin data menjadi dinamis, pastikan untuk membuat metode penolong yang dapat bereaksi. Pastikan untuk melakukan Session.set () di suatu tempat untuk melihat efeknya.

// Inside "myContainingTemplate"
{{> dynamicTemplateWithData name=myDynName data=myDataHelper}}

<template name="dynamicTemplateWithData">
    {{#with chooseTemplate name}}
        {{#with ../data}}
            {{> ..}}
        {{/with}}
    {{/with}}
</template>

Template.dynamicTemplateWithData.chooseTemplate = function (name) {
    return Template[name];
};

Template.myContainingTemplate.helpers({
    myDataHelper: function () {
        Session.get('myReactiveKey');
    }
});

13
2018-04-28 21:14



Berikut cara membuat template secara dinamis, mulai dari Meteor 0.9.4 - 1.0. Semua jawaban lainnya sudah usang pada saat penulisan ini.

Katakanlah Anda mengedit banyak rekaman, atau membuat yang baru, dan ingin membuat salah satunya update template, atau new template, berdasarkan beberapa variabel Sesi.

Ada dua cara untuk melakukan ini:

1) Ini adalah metode yang direkomendasikan secara resmi untuk Meteor 0.9.4 atau yang lebih baru - Itu menggunakan Template.dynamic:

<template name="records">
  {{> Template.dynamic template=whichOne}}
</template>

<template name="recordUpdate">
  ...
</template>

<template name="recordNew">
  ...
</template>

Template.records.helpers({
  whichOne: function () {
    return Session.get('edit') ? 'recordUpdate' : 'recordNew'
    // note that we return a string - per http://docs.meteor.com/#template_dynamic
  }
});

2) Ini berfungsi dalam berbagai versi Meteor, tetapi tidak direkomendasikan secara resmi karena tidak jelas bahwa template dipilih secara dinamis:

<template name="records">
  {{> whichOne}}
</template>

{{! Note how "whichOne" is indistinguishable from a constant template name... }}
{{  ...like "recordUpdate" or "recordNew" below. }}

<template name="recordUpdate">
  ...
</template>

<template name="recordNew">
  ...
</template>

Template.records.helpers({
  whichOne: function () {
    return Session.get('edit') ? Template.recordUpdate : Template.recordNew
    // note that we return a Template object, not a string
  }
});

Untuk menyampaikan konteks data ke template, gunakan:

{{> Template.dynamic template=whichOne data=myData}}

36
2017-10-17 09:16



Anda telah menemukan Meteor.render tetapi apa yang Anda lewatkan adalah pemuatan template. Dalam dokumen itu disebutkan bahwa Anda dapat memanggil Template.foo () untuk mengembalikan HTML untuk templat.

http://docs.meteor.com/#template_call

Menempatkan itu bersama-sama Anda mengakses template foo atau akses menggunakan braket lainnya jadi:

var templateName = "foo";
var fragment = Meteor.render( function() {
    return Template[ templateName ](); // this calls the template and returns the HTML.
});

Kemudian fragmen adalah fragmen Reaktif Anda, sehingga template Anda dapat terus menerima pembaruan langsung. Fragmen Anda sekarang perlu ditempatkan di halaman web (saya menggunakan jQuery, jadi contoh ini juga):

$("#htmlnode").html( fragment );

$ ("# htmlnode") hanyalah sebuah simpul di DOM Anda di mana Anda ingin template dirender. Dan Anda sekarang memiliki konten yang ditampilkan di halaman web Anda.


7
2017-10-20 07:41



Saya hanya melakukannya seperti ini, tidak perlu jQuery:

DIEDIT

Template.mainContent.showContentFromRouter = function() {
    return Template[Meteor.Router.page()]();
};

Dalam hal ini saya menggunakan Meteor Router, dan mengembalikan template apa pun yang saya pilih (dari Router), tetapi Anda bisa melakukan ini:

Template.mainContent.showDynamicContent = function() {
    return Template['someTemplateYouveDefined']();
};

2
2018-02-26 15:02



Pembaruan untuk api:

https://github.com/meteor/meteor/wiki/Using-Blaze#templatefoo-is-not-a-function-and-does-not-return-a-string

Secara dinamis membuat template dengan konteks data tertentu

Tua:

{{dynamicTemplate name="templateName" data=dataContext}}

Template.foo.dynamicTemplate = function (opts) {
  return Template[opts.name](opts.data);
};

Baru: (Khususnya, dalam Blaze, argumen kata kunci untuk penyertaan atau pemblokiran dibundel menjadi satu objek yang menjadi konteks data baru)

{{> dynamicTemplate name="templateName" data=dataContext}}

<template name="dynamicTemplate">
  {{#with chooseTemplate name}}
    {{#with ../data}}  {{! original 'data' argument to DynamicTemplate}}
      {{> ..}}         {{! return value from chooseTemplate(name) }}
    {{/with}}
  {{/with}}
</template>

Template.dynamicTemplate.chooseTemplate = function (name) {
  return Template[name];
}

By the way, saya tidak benar-benar bermain dengan itu, tapi ini yang saya ambil dari dokumen blaze yang baru. Jadi saya pikir itu harus menjadi cara untuk melakukannya;)


2
2017-09-10 20:28



Dari https://github.com/meteor/meteor/wiki/Using-Blaze

{{> post}}

Template.foo.helpers({
  post: function () {
    return Template[this.postName];
  }
});

Penyertaan template sekarang mencari namespace pembantu dan data untuk objek template, sehingga mudah untuk memilih template yang akan digunakan secara terprogram. Ini adalah fitur yang kuat, dan akan memungkinkan pola seperti menugaskan satu template sebagai pembantu dari yang lain sehingga dapat dikesampingkan.


0
2017-08-13 06:00



Meteor 0.8.x Legacy

Menggunakan Milik Joc jawab sebagai panduan, Saya telah mencapai penggunaan serupa http://docs.meteor.com/#template_call, tetapi menggunakan helper sebagai gantinya, seperti yang disarankan oleh dokumen:

Ketika dipanggil di dalam helper template, tubuh Meteor.render, atau pengaturan lain di mana HTML reaktif sedang dibuat, HTML yang dihasilkan dianotasi sehingga menjadikan sebagai elemen DOM reaktif

Client.js saya terlihat sedikit seperti ini:

Template.myPageTemplate.helpers({
  dynamicTemplate: function() {
    // conditional logic can be added here to determine which template to render
    return Template.myDynamicTemplate();
  }
});

dan html saya terlihat seperti ini:

<template name="myPageTemplate">
  <h1>My Template</h1>
  {{{dynamicTemplate}}}
</template>

<template name="myDynamicTemplate">
  <h1>My Dynamic Template</h1>
</template>

0
2017-07-31 14:41



Berdasarkan jawaban Hillmark, ini adalah cara termudah yang bisa didapatkan:

Template.main.template = function() {
  if (some_condition) {
    return Template.A();
  } else {
    return Template.B();
  }
};

Dengan .html yang sesuai

<body>
    {{> main}}
</body>

<template name="main">
    {{{template}}}
</template>

<template name="A">
    <h1>Template A</h1>
</template>

<template name="B">
    <h1>Template B</h1>
</template>

Edit Tidak berfungsi di Meteor 0.8.0


-1
2018-03-24 08:55



bagi saya cara termudah adalah dengan hanya membuat get_dynamic_template fungsi, jadi sesuatu seperti:

var a= get_dynamic_template(template_name,data);

yang mengembalikan apa yang dapat diberikan sebagai variabel normal {{a}}

Kode untuk fungsi ini cukup sederhana:

var get_dynamic_template = function(template_name,data)
{

      return function(){
        return new Handlebars.SafeString(
          UI.toHTML(
               Template[template_name].extend({data: function () { return data; }}))
          );
      };

}

-1
2018-04-05 21:36