Apa praktik terbaik untuk menyusun aplikasi Meteor besar dengan banyak file templat HTML? [Tutup]

165

Dalam semua contoh (leaderboard, permainan kata, dll.) Mereka memiliki satu file template HTML tunggal. Apakah ada beberapa proyek Meteor open source besar dengan banyak file template HTML berbeda yang dapat kita gunakan sebagai contoh praktik terbaik? Tampaknya tidak praktis untuk meletakkan semua yang dibutuhkan aplikasi besar semua dalam satu file templat.

meteor Andrew Arrow
sumber
meteor adalah hal baru, saya belum menemukan apa pun terkait praktik terbaik tentang ini. Saya juga mengharapkan beberapa guildline tentang ini
newlife
10
Sudahkah Anda membaca bagian tentang Penataan aplikasi Anda dalam manual? Ada beberapa penjelasan tentang pemindaian dan penggabungan file HTML.
zwippie
1
Panduan resmi Meteor menunjukkan struktur file yang sangat keren. Periksa di sini: guide.meteor.com/structure.html#javascript-structure
Waqas

Jawaban:

16

Benjolkan semuanya! Dari dokumen:

> HTML files in a Meteor application are treated quite a bit differently
> from a server-side framework. Meteor scans all the HTML files in your
> directory for three top-level elements: <head>, <body>, and
> <template>. The head and body sections are seperately concatenated
> into a single head and body, which are transmitted to the client on
> initial page load.
> 
> Template sections, on the other hand, are converted into JavaScript
> functions, available under the Template namespace. It's a really
> convenient way to ship HTML templates to the client. See the templates
> section for more.
mdgrech
sumber
29
Ini adalah perhatian poster. Lumping tidak masalah, tetapi Anda dapat melihat apa yang terjadi dengan Asana - ini memerlukan layar muat saat mengunduh> 1MB kode klien. Itu tidak dapat diterima untuk banyak situs. Kita akan melihat apakah kita mungkin tidak bisa melakukan sedikit demi sedikit pemuatan setelah pemuatan layar utama, tapi saya ragu sekarang. Saya pikir ini akan perlu menjadi fitur untuk memecah sedikit.
Dave Sanders
36
Jawaban ini adalah hasil # 1 di google tetapi sudah usang. Lainnya, pengunjung masa depan seperti saya; Lihat ke bawah!
Kloar
Pada 1.1.0.2, aplikasi todo sederhana yang mereka demokan mentransfer 1,7MB file ketika Anda susah memuat ulang dengan cache browser dihapus. Ini tidak dapat diterima untuk banyak kasus penggunaan di luar sana. : / Banyak hal membaik setelah aset di-cache, tetapi pada beban pertama, itu cukup brutal.
Jason Kim
Ide: gunakan webpack, buat bundel untuk berbagai hal, malas memuatnya saat dibutuhkan.
trusktr
ya Asana butuh waktu untuk memuat. Asana juga merupakan aplikasi reaktif yang dilakukan dengan sangat baik di mana pengguna menciptakan 175 juta tugas pada tahun 2014. Aplikasi yang memuat lebih cepat tidak selalu lebih baik. Butuh beberapa saat bagi aplikasi untuk memulai telepon Anda juga. Orang-orang akan terbiasa dengannya.
Max Hodges
274

Seperti dalam faq meteor tidak resmi, saya pikir cukup banyak menjelaskan cara membuat aplikasi besar:

Di mana saya harus meletakkan file saya?

Contoh aplikasi di meteor sangat sederhana, dan tidak memberikan banyak wawasan. Inilah pemikiran saya saat ini tentang cara terbaik untuk melakukannya: (setiap saran / perbaikan sangat disambut!)

lib/                       # <- any common code for client/server.
lib/environment.js         # <- general configuration
lib/methods.js             # <- Meteor.method definitions
lib/external               # <- common code from someone else
## Note that js files in lib folders are loaded before other js files.

collections/               # <- definitions of collections and methods on them (could be models/)

client/lib                 # <- client specific libraries (also loaded first)
client/lib/environment.js  # <- configuration of any client side packages
client/lib/helpers         # <- any helpers (handlebars or otherwise) that are used often in view files

client/application.js      # <- subscriptions, basic Meteor.startup code.
client/index.html          # <- toplevel html
client/index.js            # <- and its JS
client/views/<page>.html   # <- the templates specific to a single page
client/views/<page>.js     # <- and the JS to hook it up
client/views/<type>/       # <- if you find you have a lot of views of the same object type
client/stylesheets/        # <- css / styl / less files

server/publications.js     # <- Meteor.publish definitions
server/lib/environment.js  # <- configuration of server side packages

public/                    # <- static files, such as images, that are served directly.

tests/                     # <- unit test files (won't be loaded on client or server)

Untuk aplikasi yang lebih besar, fungsionalitas diskrit dapat dipecah menjadi sub-direktori yang diatur menggunakan pola yang sama. Idenya di sini adalah bahwa akhirnya modul fungsionalitas dapat difaktorkan ke dalam paket pintar yang terpisah, dan idealnya, dibagikan.

feature-foo/               # <- all functionality related to feature 'foo'
feature-foo/lib/           # <- common code
feature-foo/models/        # <- model definitions
feature-foo/client/        # <- files only sent to the client
feature-foo/server/        # <- files only available on the server

Cari tahu lebih lanjut: FAQ Meteor Tidak Resmi

yagooar
sumber
12
IMHO ini lebih baik daripada jawaban yang diterima. Saya akan mencobanya sekarang.
hakan
17
Sejak 0.6.0, Anda jauh lebih baik menghindari kekacauan itu dan menjalankan aplikasi Anda sepenuhnya dari paket pintar. Saya masuk ke sedikit lebih detail dalam posting blog ini: matb33.me/2013/09/05/meteor-project-structure.html
matb33
1
ada yang punya petunjuk di mana harus meletakkan mobile-config.js?
Bung
1
Terima kasih atas jawabannya dan tautan ke faq tidak resmi (saya baru di dunia meteor), apa yang mereka maksud dengan "kode umum dari orang lain"? Terima kasih!
Cohars
3
Adapun meteor 1.3, saya akan mengatakan ini sudah usang karena impor modul ES6. Lihat artikel panduan meteor tentang struktur aplikasi: guide.meteor.com/structure.html
Samuel
36

Saya setuju dengan yagooar, tetapi bukannya:

client / application.js

Menggunakan:

client / main.js

main. * file dimuat terakhir. Ini akan membantu memastikan bahwa Anda tidak memiliki masalah pemuatan pesanan. Lihat dokumentasi Meteor, http://docs.meteor.com/#structuringyourapp , untuk detail lebih lanjut.

pwcremin
sumber
26

Meteor dirancang agar Anda menyusun aplikasi dengan cara apa pun yang Anda inginkan. Jadi jika Anda tidak suka struktur Anda, Anda bisa memindahkan file ke direktori baru, atau bahkan membagi satu file menjadi banyak bagian, dan untuk Meteor hampir semuanya sama. Perhatikan saja perlakuan khusus direktori klien, server, dan publik seperti yang ditentukan dalam halaman dokumentasi utama: http://docs.meteor.com/ .

Hanya menyatukan semuanya dalam satu isian HTML tentu tidak akan muncul sebagai praktik terbaik.

Berikut adalah contoh dari satu struktur yang mungkin: di salah satu aplikasi saya, forum diskusi, saya mengatur berdasarkan modul atau "tipe halaman" (home, forum, topik, komentar), menempatkan file .css, .html, dan .js untuk masing-masing jenis halaman bersama dalam satu direktori. Saya juga memiliki modul "base", yang berisi kode .css dan .js dan templat induk, yang menggunakan {{renderPage}} untuk membuat salah satu modul lain bergantung pada router.

my_app/
    lib/
        router.js
    client/
        base/
            base.html
            base.js
            base.css
        home/
            home.html
            home.js
            home.css
        forum/
            forum.html
            forum.js
            forum.css
        topic/
            topic.html
            topic.js
            topic.css
        comment/
            comment.html
            comment.js
            comment.css

Anda juga dapat mengatur berdasarkan fungsi

my_app/
    lib/
        router.js
    templates/
        base.html
        home.html
        forum.html
        topic.html
        comment.html
    js/
        base.js
        home.js
        forum.js
        topic.js
        comment.js
    css/
        base.css
        home.css
        forum.css
        topic.css
        comment.css

Saya berharap beberapa struktur praktik terbaik dan konvensi penamaan yang lebih spesifik muncul.

Jonathan Warden
sumber
2
Ini jawaban favorit saya. Salah satu hal favorit saya tentang Meteor adalah Anda dapat membuat struktur file dengan cara yang sesuai untuk Anda.
CaptSaltyJack
Saya suka jawaban ini. Saya sudah melakukannya dengan cara pertama.
Sung Cho
hal-hal terkait harus dekat satu sama lain. Jawaban saya seperti milik Anda tetapi mundur.
Max Hodges
1.3 lib yang digerakkan
Jeremy Iglehart
saya tidak melihat nilai dalam menamai banyak file dengan nama fitur seperti "topik". Sekarang jika Anda ingin mengubah nama fitur menjadi "kategori" Anda harus mengubah beberapa nama file. Cukup atur di bawah satu folder yang disebut "topik" dan beri nama secara umum: events.js, views.html, style, css, routes.js, dll. Lihat jawaban saya untuk lebih lanjut.
Max Hodges
14

Untuk semua orang yang Googling tentang topik ini:

The emtool baris perintah (oleh EventedMind, orang-orang di balik Iron Router) sangat membantu ketika rigging sebuah Meteor App baru. Ini akan membuat struktur file / folder yang bagus. Jika Anda sudah mengerjakan aplikasi dan ingin mengatur ulang, cukup buat proyek baru emdan Anda dapat menggunakannya untuk inspirasi.

Lihat: https://github.com/EventedMind/em

Dan di sini: /programming/17509551/what-is-the-best-way-to-organize-templates-in-meteor-js

Mikael Lirbank
sumber
4
Catatan: ini telah diganti dengan iron-cli (penulis yang sama). Lihat: github.com/iron-meteor/iron-cli
j0e
Ya, mereka telah berganti nama menjadi iron-cli, alat yang sama.
Mikael Lirbank
11

Saya pikir struktur file dari Discover Meteor Book benar-benar bagus dan awal yang kuat. 

/app: 
 /client
   main.html
   main.js
 /server 
 /public
 /lib
 /collections
  • Kode dalam direktori / server hanya berjalan di server.
  • Kode di direktori / klien hanya berjalan di klien.
  • Segala sesuatu yang lain berjalan pada klien dan server.
  • File di / lib dimuat sebelum yang lainnya.
  • File. * Utama apa saja diambil setelah yang lainnya.
  • Aset statis Anda (font, gambar, dll.) Masuk ke direktori / publik.
Almog Koren
sumber
10

Buat paket

Tentu saja tidak semuanya cocok dengan pendekatan ini, tetapi dalam aplikasi besar Anda akan memiliki banyak fungsi yang dapat diisolasi. Apa pun yang dapat dipisahkan dan digunakan kembali dalam paket, sisanya masuk dalam struktur direktori yang biasa, seperti disebutkan dalam jawaban lain. Sekalipun Anda tidak membuat paket untuk menghindari overhead, menyusun kode secara modular adalah ide yang bagus (lihat saran ini )

Meteor memungkinkan kontrol yang baik atas bagaimana Anda memuat file Anda (urutan pemuatan, di mana: client / server / keduanya) dan apa yang diekspor paket.

Saya khususnya merasa sangat mudah cara mudah untuk berbagi logika antara file terkait. Katakan, misalnya, Anda ingin membuat beberapa fungsi util dan digunakan dalam file yang berbeda. Anda hanya membuatnya "global" (tanpa var) dan Meteor akan membungkusnya di namespace paket, sehingga tidak akan mencemari namespace global

Inilah dokumen resmi

Bogdan D
sumber
6

Setelah beberapa saat keluar dari pengkodean meteor, saya senang memiliki waktu luang untuk mencurahkan untuk membangun game online yang cukup kompleks. Struktur aplikasi telah menjadi salah satu perhatian pertama saya, dan sepertinya beberapa programmer yang sangat baik telah memperjuangkan metode paket-satunya untuk menyusun aplikasi, yang memungkinkan Anda untuk secara longgar pasangan paket yang berbeda secara fungsional. Ada keuntungan lain dari pendekatan ini, dan 2 artikel yang sangat bagus menjelaskan pendekatan tersebut dapat ditemukan di sini:

http://www.matb33.me/2013/09/05/meteor-project-structure.html http://www.manuel-schoebel.com/blog/meteorjs-package-only-app-structure-with-mediator -pola

lebih lanjut
sumber
6

Kami memiliki proyek besar (mungkin salah satu proyek Meteor terbesar yang pernah dibangun siapa pun karena sedang dalam pengembangan penuh waktu selama 1,5 tahun). Kami menggunakan set nama file yang sama di setiap tampilan. Ini sangat konsisten dan membantu kita dengan cepat menavigasi ke apa yang kita cari:

  • events.js
  • helpers.js
  • templates.html
  • route.js
  • tanpa style
  • dll.

Sepertinya ini dalam sebuah proyek:

       ├── Permintaan konsolidasi
       │ ├── events.js
       │ ├── helpers.js
       │ ├── routers.js
       │ └── templates.html
       ├── pelangganSpoof
       │ └── routers.js
       ├── dasbor
       │ ├── events.js
       │ ├── helpers.js
       │ ├── onDestroyed.js
       │ ├── onRendered.js
       │ ├── routers.js
       │ └── templates.html
       ├── email Verifikasi
       │ ├── events.js
       │ ├── helpers.js
       │ ├── routers.js
       │ └── templates.html
       ├── memuat
       │ ├── styles.css
       │ └── templates.html
       ├── kotak surat
       │ ├── autoform.js
       │ ├── konsolidasi Permintaan Konfirmasi
       │ │ ├── events.js
       │ │ ├── helpers.js
       │ │ ├── onCreated.js
       │ │ ├── onRendered.js
       │ │ └── templates.html
       │ ├── events.js
       │ ├── helpers.js

Template terkait hanya disimpan bersama dalam file yang sama. Isi dari yang view/order/checkout/templates.htmlditampilkan diciutkan di sini:

<template name="orderCheckout"></template>

<template name="paymentPanel"></template>

<template name="orderCheckoutSummary"></template>

<template name="paypalReturnOrderCheckout"></template>

Kami menggunakan subfolder ketika tampilan menjadi kompleks dengan banyak bagian:

       ├── kereta
       │ ├── addItem
       │ │ ├── autoform.js
       │ │ ├── events.js
       │ │ ├── helpers.js
       │ │ ├── onRendered.js
       │ │ ├── routers.js
       │ │ ├── styles.less
       │ │ └── templates.html
       │ ├── checkout
       │ │ ├── autoform.js
       │ │ ├── events.js
       │ │ ├── helpers.js
       │ │ ├── onRendered.js
       │ │ ├── routers.js
       │ │ └── templates.html
       │ └── lihat
       │ ├── autoform.js
       │ ├── deleteItem
       │ │ ├── events.js
       │ │ ├── helpers.js
       │ │ └── templates.html
       │ ├── editItem
       │ │ ├── autoform.js
       │ │ ├── events.js
       │ │ ├── helpers.js
       │ │ └── templates.html
       │ ├── events.js
       │ ├── helpers.js
       │ ├── onDestroyed.js
       │ ├── onRendered.js
       │ ├── routers.js
       │ ├── styles.less
       │ └── templates.html

Kami juga mengembangkan dengan WebStorm, editor yang sangat kuat dan fleksibel untuk pengembangan Meteor. Kami merasa sangat membantu ketika mencari dan mengatur kode kami dan bekerja secara produktif. Tampilan webstorm

Senang berbagi detail berdasarkan permintaan.

Max Hodges
sumber
3
Silakan pertimbangkan untuk menambahkan komentar jika Anda pikir jawaban ini dapat ditingkatkan.
Max Hodges
Pos yang bagus. Pertanyaan: Setelah sekian lama menggunakan meteor, Anda masih merekomendasikannya untuk proyek besar, seperti e-commerce? Atau pertimbangkan untuk menggunakan kerangka kerja yang dapat memberi Anda lebih banyak "otonomi" sebagai LoopBack atau bahkan Happi.
Liko
kami mencintai Meteor dan melakukan semua pengembangan baru di dalamnya. Sayangnya saya tidak cukup akrab dengan LoopBack atau Happi untuk memiliki pendapat.
Max Hodges
1
LoopBacks fokus pada API sisanya end-to-end membuatnya terdengar seperti kerangka pengembangan web tradisional (seperti RoR). RoR mendapatkan REST API dengan benar, tetapi kami merasa Meteor benar secara langsung.
Max Hodges
Terima kasih untuk umpan baliknya. Anda mengatur sisi server untuk fitur juga?
Liko 2-15
5

Gunakan CLI scaffolding besi-cli. Memang membuat semuanya sangat mudah.

https://github.com/iron-meteor/iron-cli

setelah diinstal. gunakan iron create my-appuntuk membuat proyek baru. Ini akan membuat struktur berikut untuk Anda. Anda juga dapat menggunakan ini pada proyek yang ada. gunakan iron migratedalam direktori proyek.

my-app/    
 .iron/    
   config.json    
 bin/    
 build/    
 config/    
   development/    
     env.sh    
     settings.json    
 app/    
   client/    
     collections/    
     lib/    
     stylesheets/    
     templates/    
     head.html    
   lib/    
     collections/    
     controllers/    
     methods.js    
     routes.js    
   packages/    
   private/    
   public/    
   server/    
     collections/    
     controllers/    
     lib/    
     methods.js    
     publish.js    
     bootstrap.js
ravish.hacker
sumber
Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid jika halaman tertaut berubah.
user2314737
@ user2314737 Shoutout untuk mengatakan bahwa penjawab memang mengedit posnya. Sekarang termasuk data penting yang diperlukan untuk masalah yang dihadapi.
Kyll
4

Saya mengikuti format boilerplate mattdeom, yang sudah termasuk router besi & Model (Collection2). Lihat di bawah :

client/                 # Client folder
    compatibility/      # Libraries which create a global variable
    config/             # Configuration files (on the client)
    lib/                # Library files that get executed first
    startup/            # Javascript files on Meteor.startup()
    stylesheets         # LESS files
    modules/            # Meant for components, such as form and more(*)
    views/              # Contains all views(*)
        common/         # General purpose html templates
model/                  # Model files, for each Meteor.Collection(*)
private/                # Private files
public/                 # Public files
routes/                 # All routes(*)
server/                 # Server folder
    fixtures/           # Meteor.Collection fixtures defined
    lib/                # Server side library folder
    publications/       # Collection publications(*)
    startup/            # On server startup
meteor-boilerplate      # Command line tool
Rudy
sumber
3

Ada banyak pendekatan berbeda untuk penataan aplikasi Anda. Sebagai contoh jika Anda memiliki router dan template halaman yang berbeda, dan di dalam setiap template halaman Anda memiliki banyak bagian halaman dan seterusnya, saya akan menyusunnya tergantung pada semantik dari level yang> lebih tinggi.

Sebagai contoh:

client
  views
    common
      header
        header.html
        header.js
        header.css
      footer
        footer.html
        footer.js
        footer.css
    pages
      mainPage
        mainPage.html
        mainPage.js
        mainPage.css
        articles
          articles.html
          articles.js
          articles.css
        news
          news.html
          news.js
          news.css
     ...

Tentu saja, Anda bisa meletakkan template berita Anda di folder umum, karena Anda bisa menggunakan template berita Anda di halaman yang berbeda.

Saya pikir itu yang terbaik Anda menyusun aplikasi Anda dengan cara yang Anda sukai.

Saya menulis aplikasi kecil di sini: http://gold.meteor.com Dan itu sangat kecil, saya hanya menggunakan satu file html dan hanya satu file template.js .. :)

Saya harap ini sedikit membantu

Boris Kotov
sumber
saya tidak melihat nilai dalam menamai banyak file dengan nama fitur seperti "artikel". Sekarang jika Anda ingin mengubah nama fitur menjadi "posting" Anda harus mengubah nama file. Cukup atur di bawah satu folder bernama "artikel" dan beri nama "events.js", views.html, style, css, dll. Lihat jawaban saya untuk lebih lanjut.
Max Hodges
3

Ada kelas baru di Evented Mind yang disebut Mengatur Proyek Meteor yang membahas ini tetapi juga berbicara tentang konfigurasi proyek dan mengatur lingkungan pengembangan Anda.

Dari video Struktur Aplikasi di kelas: Meteor tidak memiliki pendapat yang sangat kuat tentang bagaimana aplikasi Anda harus disusun tetapi di sini ada beberapa aturan:

1) Muat pesanan - Meteor pergi ke lokasi terdalam di direktori file terlebih dahulu dan memproses file dalam urutan abjad

2) klien dan server adalah folder khusus yang diakui Meteor

Struktur kami terlihat seperti ini:

both/
    collections/
        todos.js
    controllers/
        todos_controller.js
    views/
        todos.css
        todos.html
        todos.js
    app.js - includes routes
client/
    collections/
    views/
        app.js
server/
    collections/
    views/
        app.js
packages/
public/

The todos_controller meluas RouteController, sesuatu yang datang dengan Iron Router.

The emalat yang disebutkan di atas juga mendapatkan update besar sekarang dan harus jauh lebih baik dan tersedia di: https://github.com/EventedMind/em

katogeaver
sumber
apa pandangan di dalam / server / tampilan /?
stefcud
saya tidak melihat nilai dalam menamai banyak file dengan nama fitur seperti "todos". Sekarang jika Anda ingin mengubah nama fitur menjadi "tugas" Anda harus mengubah 5 nama file. Cukup atur di bawah satu folder yang disebut "todos" dan beri nama "events.js", views.html, style, css, dll. Lihat jawaban saya untuk lebih lanjut.
Max Hodges
1

Saya juga mencari praktik terbaik untuk meningkatkan dan skala aplikasi saya melalui arsitektur yang dipahami dengan baik. Semua praktik yang disebutkan di atas berfungsi untuk aplikasi berukuran kecil hingga sedang, tetapi akan gagal saat Anda bekerja di tim yang lebih besar. Ada beberapa cara yang saya coba:

1) Saya mengikuti strategi ini: https://github.com/aldeed/meteor-autoform untuk membuat skala dan menggunakan kembali template. Penulis memiliki ide yang sangat bagus tentang desain komponen dan bidang. Saat ini saya mengimplementasikannya karena komunitas mengembangkan 36 paket yang mencakup hampir setiap kasus dan saya dapat menggunakan TypeScript untuk mengetikkan aman selama fase pengembangan.

<template name="autoForm">
  {{#unless afDestroyUpdateForm this.id}}
  {{! afDestroyUpdateForm is a workaround for sticky input attributes}}
  {{! See https://github.com/meteor/meteor/issues/2431 }}
  <form {{atts}}>
    {{> Template.contentBlock ..}}
  </form>
  {{/unless}}
</template>

Berikut ini adalah posting blog yang bagus tentang cara melakukannya: http://blog.east5th.co/2015/01/13/custom-block-helpers-and-meteor-composability/ juga di sini: http: // meteorpedia .com / baca / Blaze_Notes

2) Yang ini terlihat sangat menjanjikan tetapi belum diperbarui akhir-akhir ini. Ini adalah paket yang ditulis dalam skrip kopi yang disebut. Komponen Blaze ( https://github.com/peerlibrary/meteor-blaze-components ) untuk Meteor adalah sistem untuk mengembangkan elemen UI kompleks yang perlu digunakan kembali di sekitar aplikasi Meteor Anda. Anda dapat menggunakannya dalam CoffeeScript, JavaScript vanilla, dan ES6. Yang terbaik adalah, komponennya adalah OOP. Ini adalah salah satu contoh mereka:

class ExampleComponent extends BlazeComponent {
  onCreated() {
    this.counter = new ReactiveVar(0);
  }

  events() {
    return [{
      'click .increment': this.onClick
    }];
  }

  onClick(event) {
    this.counter.set(this.counter.get() + 1);
  }

  customHelper() {
    if (this.counter.get() > 10) {
      return "Too many times";
    }
    else if (this.counter.get() === 10) {
      return "Just enough";
    }
    else {
      return "Click more";
    }
  }
}

ExampleComponent.register('ExampleComponent');

{{> ExampleComponent }}

3) Saya suka jenis dan transpiler yang memberi tahu saya di mana dan kapan ada sesuatu yang salah. Saya menggunakan TypeScript untuk bekerja dengan Meteor dan menemukan repositori berikut: https://github.com/dataflows/meteor-typescript-utils sepertinya pencipta mencoba menyelesaikan pendekatan MVC.

class MainTemplateContext extends MainTemplateData {
    @MeteorTemplate.event("click #heybutton")
    buttonClick(event: Meteor.Event, template: Blaze.Template): void {
        // ...
    }

    @MeteorTemplate.helper
    clicksCount(): number {
        // ...
    }
}

class MainTemplate extends MeteorTemplate.Base<MainTemplateData> {
    constructor() {
        super("MainTemplate", new MainTemplateContext());
    }

    rendered(): void {
        // ...
    }
}

MeteorTemplate.register(new MainTemplate());

<template name="MainTemplate">
    <p>
        <input type="text" placeholder="Say your name..." id="name">
        <input type="button" value="Hey!" id="heybutton">
    </p>
    <p>
        Clicks count: {{ clicksCount }}
    </p>

    <p>
        <ul>
            {{#each clicks }}
                <li> {{ name }} at <a href="{{pathFor 'SingleClick' clickId=_id}}">{{ time }}</a></li>
            {{/each}}
        </ul>
    </p>
</template>

Sayangnya, proyek ini tidak dikelola atau dikembangkan secara aktif.

4) dan saya pikir itu sudah disebutkan, Anda dapat skala menggunakan paket. Itu membutuhkan cara berpikir abstrak yang baik. Tampaknya berfungsi untuk Teleskop: https://github.com/TelescopeJS/Telescope

5) meteor-template-extension - menyediakan berbagai cara menyalin pembantu templat, penangan peristiwa dan kait di antara templat, memungkinkan penggunaan kembali kode; Kelemahannya adalah bahwa semua penyalinan harus diperhatikan oleh pengembang, seringkali berulang kali, yang menjadi masalah ketika basis kode bertambah; selain itu, tanpa komunitas API yang jelas tidak dapat membangun dan berbagi komponen

6) Komponen Aliran - Komponen Aliran lebih dekat untuk Bereaksi dalam desain API sementara Komponen Blaze menyimpan konsep yang sudah dikenal seperti konteks data dan bantuan templat; Komponen Flow di sisi lain masih menggunakan event handler berbasis template sementara Blaze Components membuatnya menjadi metode kelas sehingga lebih mudah untuk memperluas atau menimpanya melalui warisan; secara umum Komponen Blaze tampaknya lebih berorientasi OOP; Komponen Arus belum dirilis secara resmi ( kredit teks untuk # 5 dan # 6 https://github.com/peerlibrary/meteor-blaze-components#javascript-and-es6-support )

Nomor 2 dan 3 perlu dibiasakan juga, tetapi Anda akan mendapatkan kecepatan pengembangan seiring waktu. Nomor empat memungkinkan Anda membuat dan menguji komponen untuk membuat kode Anda lebih stabil. Nomor tiga hadir dengan keuntungan dari keamanan tipe penuh dari ScriptScript, yang merupakan nilai tambah besar ketika Anda berkembang dalam tim dengan dokumentasi yang buruk. Namun, saya saat ini porting nomor dua ke TypeScript karena saya merasa sangat nyaman untuk bekerja dengannya dan saya tidak perlu tweek paket kompiler untuk membuatnya bekerja dengan Meteor ketika saya tidak menggunakan Gulp.

Masih sulit menemukan cara yang tepat untuk bekerja dengan Meteor. Anda harus mengetahuinya sendiri, jika tidak, Anda akan berakhir dengan struktur folder yang tertata dengan baik, tetapi Anda tidak tahu di mana semuanya berada. Selamat coding.

MichelH
sumber