Vấn đề của tôi:

Tôi đang cố gắng viết một ứng dụng Knockout JS nhỏ trong Magento 2, tôi đang vật lộn để khởi tạo ứng dụng vì khi tôi sử dụng ko.applyBindings(AppViewModel, document.getElementById("koTest"));nó sẽ phá vỡ Knockout được Magento sử dụng và ném lỗi này:

Uncaught Error: You cannot apply bindings multiple times to the same element.

Tôi nghi ngờ đó là vì:

Tôi nghi ngờ điều này là do Magento 2 đã sử dụng ko.applyBindings()bên trong app/code/Magento/Ui/view/base/web/js/lib/knockout/bootstrap.js. Và vì điều đó không chỉ định một nút tôi không thể sử dụng ko.applyBindingslại.

Nếu tôi không sử dụng ko.applyBindings(AppViewModel, document.getElementById("koTest"))mã của mình thì ứng dụng của tôi sẽ không khởi tạo.

Điều này khiến tôi nghĩ rằng tôi cần phải bằng cách nào đó sử dụng ko.applyBindings()trong knockout / bootstrap.js nhưng tôi không biết làm thế nào, có ai có thể giúp đỡ không? Tôi có ít kinh nghiệm với Knockout.

Mã của tôi

<script type="text/javascript">
    require([
        'ko'
    ], function(ko) {
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {

            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");
            this.fullName = ko.computed(function() {
                return this.firstName() + " " + this.lastName();
            }, this);

            this.capitalizeLastName = function() {
                var currentVal = this.lastName();
                this.lastName(currentVal.toUpperCase());
            };
        }

        ko.applyBindings(AppViewModel, document.getElementById("koTest"));
    });
</script>

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<div id="koTest">
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
    <p>Full name: <strong data-bind="text: fullName"></strong></p>

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <p>Full name: <input data-bind="value: fullName" /></p>

    <button data-bind="click: capitalizeLastName">Capitalise</button>
</div>

Phương pháp đơn giản mà bạn KHÔNG cần sử dụng các mẫu html

Cảm ơn Vinai Kopp, cuối cùng tôi đã có câu trả lời cho vấn đề này, nó đơn giản hơn nhiều so với cách giải quyết trước đây của tôi (tôi đã làm sạch các nút). Tất cả những gì bạn cần làm là xác định 'ko'là một phụ thuộc và thêm mã của bạn vào trong hàm trả về.

Dưới đây là một ví dụ đơn giản thể hiện một số văn bản được truyền qua JSON.

app/code/VENODR/MODULE/view/frontend/templates/knockout-example.phtml

Ở đây chúng tôi nói với Magento phạm vi của các thành phần của chúng tôi (điều này phải khớp data-bind: "scope: 'example-scope'"và chuyển bất kỳ dữ liệu bổ sung nào. Đây có thể là URL cơ sở, một thông điệp đơn giản, gần như mọi thứ bạn muốn. Tôi đã truyền một chuỗi (tiếng vang PHP) làm ví dụ

<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>

Và ở đây chúng tôi viết Javascript của chúng tôi.

app/code/VENDOR/MODULE/view/frontend/web/js/knockout-example.js

define(['ko'], function(ko) {
    return function(config) {
        this.message = ko.observable(config.exampleMessage);
    }
});

 Kết quả

---------------------

Phương pháp bạn cần sử dụng các mẫu HTML

Nếu bạn muốn sử dụng hệ thống tạo khuôn mẫu HTML trong Magento2 / Knockout (mà tôi cho rằng bạn sẽ cần cho bất kỳ phần công việc quan trọng nào), có một vài thay đổi bạn sẽ cần thực hiện so với câu trả lời đơn giản của tôi (bên dưới).

Nếu bạn không yêu cầu chức năng mẫu thì hãy cuộn xuống câu trả lời đơn giản cũ của tôi.

Các tệp tôi đang sử dụng cho ví dụ này là:

• 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

Tệp mẫu PHTML

Thay đổi duy nhất đối với mẫu PHTML của chúng tôi là lệnh gọi getTemplate()hàm:

<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>

Tệp JS (thành phần)

Có một vài thay đổi bạn sẽ cần thực hiện đối với tệp JS, tôi sẽ trình bày chi tiết những điều dưới đây.

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 - Hàm trả về của bạn bây giờ cần mở rộng mô-đun uiComponent:

return Component.extend({
    ...
});

2 - Bạn cần thêm một initializechức năng và gọi this._super(). this._super()sẽ gọi hàm của thành phần cha có cùng tên. Vì vậy, trong trường hợp này tôi nghĩ rằng nó sẽ gọi initializecủa uiComponent.

initialize: function() {
    this._super();
    ...
}.

3 - Tùy chọn - Bạn cũng có thể đặt một số giá trị mặc định cho thành phần của mình ở đây, tôi nghĩ rằng đây là một cách thực hành tốt vì nó làm cho thành phần của bạn dễ làm việc. Khi bạn sử dụng lại, bạn có thể giữ mặc định hoặc nếu bạn muốn tùy chỉnh nó, bạn có thể gọi nó với các đối số mới mà không thay đổi thành phần.

Ví dụ: nếu bạn nhìn vào các giá trị mặc định trong JS, nó sẽ đặt exampleMessagethành 'Hello?'trang đang hiển thị văn bản dưới dạng Hello Magento Stack Exchange!. Điều này là do tôi đã ghi đè lên exampleMessagetệp PHTML khi tôi gọi thành phần này.

Mẫu HTML

Tôi vẫn đang tìm hiểu kỹ xem các mẫu HTML có khả năng gì, tôi cho rằng các tính năng được đề cập trong tài liệu Knockout JS có thể được sử dụng ở đây khiến chúng khá linh hoạt.

Bây giờ tôi mới thêm một số văn bản ipsum lorem, tôi có thể sẽ cung cấp một câu hỏi / câu trả lời khác một khi tôi đã tìm ra những gì các mẫu HTML có thể làm.

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!

Kết quả và ghi đè mặc định

Như đã đề cập trước khi bạn có thể thấy rằng tôi đã ghi đè exampleMessagetrong mẫu, bạn có thể thấy nó hoạt động như văn bản đã đọc Hello Magento Stack Exchange.

Nếu tôi loại bỏ ghi đè trong tệp mẫu exampleMessagesẽ trở về mặc định của nó Hello?. Tôi đã cần phải xóa var/view_preprocessedvà pub/static/frontendsau khi thay đổi điều này mặc dù. Tôi đoán Magento đã lưu trữ giá trị.

https://github.com/seeni9589/Magento2/tree/master/Smart/Feedback

Hình thức phản hồi tùy chỉnh với js loại trực tiếp. Hy vọng nó giúp.