Metode sederhana di mana Anda TIDAK perlu menggunakan templat html
Berkat Vinai Kopp, saya akhirnya mendapat jawaban untuk ini, itu jauh lebih sederhana daripada solusi hacky saya sebelumnya (saya sedang membersihkan node). Yang perlu Anda lakukan adalah mendefinisikan 'ko'
sebagai ketergantungan dan menambahkan kode Anda di dalam fungsi kembali.
Di bawah ini adalah contoh sederhana yang menerjemahkan beberapa teks yang dikirimkan melalui JSON.
app/code/VENODR/MODULE/view/frontend/templates/knockout-example.phtml
Di sini kami memberi tahu Magento ruang lingkup komponen kami (ini harus cocok data-bind: "scope: 'example-scope'"
dan meneruskan data tambahan apa pun. Ini bisa menjadi basis URL, pesan sederhana, cukup banyak apa pun yang Anda inginkan. Saya telah mengirimkan string (PHP echo) sebagai contoh
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"example-scope": {
"component": "VENDOR_MODULE/js/knockout-example",
"exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
}
}
}
}
}
</script>
<div data-bind="scope: 'example-scope'">
<h2 data-bind="text: message"></h2>
</div>
Dan di sini kita menulis Javascript kita.
app/code/VENDOR/MODULE/view/frontend/web/js/knockout-example.js
define(['ko'], function(ko) {
return function(config) {
this.message = ko.observable(config.exampleMessage);
}
});
Hasil
---------------------
Metode di mana Anda DO perlu menggunakan templat HTML
Jika Anda ingin menggunakan sistem templating HTML dalam Magento2 / Knockout (yang saya duga Anda perlukan untuk pekerjaan yang signifikan) ada beberapa perubahan yang perlu Anda lakukan dibandingkan dengan jawaban saya yang disederhanakan (di bawah).
Jika Anda tidak memerlukan fungsionalitas templat, gulir ke bawah ke jawaban sederhana saya yang lama.
File yang saya gunakan untuk contoh ini adalah:
app/design/frontend/VENDOR/THEME/Magento_Cms/templates/knockout.phtml
app/design/frontend/VENDOR/THEME/Magento_Cms/web/js/knockout-example.js
app/design/frontend/VENDOR/THEME/Magento_Cms/web/template/test.html
File template PHTML
Satu-satunya perubahan pada templat PHTML kami adalah panggilan ke getTemplate()
fungsi:
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"example-scope": {
"component": "Magento_Cms/js/knockout-example",
"exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
}
}
}
}
}
</script>
<div data-bind="scope: 'example-scope'">
<h2 data-bind="text: message"></h2>
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
File JS (komponen)
Ada beberapa perubahan yang perlu Anda lakukan pada file JS, saya akan menjelaskannya di bawah ini.
define(['ko', 'uiComponent'], function(ko, Component) {
'use strict';
return Component.extend({
defaults: {
exampleMessage: 'Hello?',
template: 'Magento_Cms/test'
},
initialize: function() {
this._super();
console.log(this.exampleMessage);
this.message = ko.observable(this.exampleMessage);
}
});
});
1 - Fungsi pengembalian Anda sekarang perlu memperluas modul uiComponent:
return Component.extend({
...
});
2 - Anda perlu menambahkan initialize
fungsi dan panggilan this._super()
. this._super()
akan memanggil fungsi komponen induk dengan nama yang sama. Jadi dalam hal ini saya pikir itu akan memanggil initialize
dari uiComponent
.
initialize: function() {
this._super();
...
}.
3 - Opsional - Anda juga dapat menetapkan beberapa default untuk komponen Anda di sini, saya pikir ini adalah praktik yang baik untuk diikuti karena membuat komponen Anda mudah untuk dikerjakan. Ketika Anda menggunakannya kembali, Anda dapat menyimpan default atau jika Anda ingin menyesuaikannya Anda bisa menyebutnya dengan argumen baru tanpa mengubah komponen.
Misalnya, jika Anda melihat default di JS yang ditetapkan exampleMessage
untuk 'Hello?'
halaman belum rendering teks sebagai Hello Magento Stack Exchange!
. Ini karena saya telah ditimpa exampleMessage
dalam file PHTML ketika saya memanggil komponen.
Template HTML
Saya masih mencari-cari dan melihat apa yang bisa templat HTML, saya kira fitur yang disebutkan pada dokumentasi Knockout JS dapat digunakan di sini membuat mereka cukup fleksibel.
Saya baru saja menambahkan beberapa teks lorem ipsum untuk saat ini, saya kemungkinan akan memberikan pertanyaan / jawaban lain setelah saya mengetahui apa yang dapat dilakukan templat HTML.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda beatae blanditiis culpa cupiditate doloremque, expedita ipsum iure magni minima modi molestiae nulla optio porro ratione reiciendis repellat soluta voluptatum!
Hasilnya, dan menimpa default
Seperti disebutkan sebelumnya Anda dapat melihat bahwa saya telah ditimpa exampleMessage
dalam template, Anda dapat melihatnya berfungsi saat teks dibaca Hello Magento Stack Exchange
.
Jika saya menghapus override dalam file template exampleMessage
akan kembali ke defaultnya Hello?
. Saya memang perlu menghapus var/view_preprocessed
dan pub/static/frontend
setelah mengubah ini. Saya kira Magento telah menyimpan nilai.