タグ付けされた質問 「knockoutjs」

私はMagento2を初めて使用し、私たちの組織はEEライセンスを取得しました。ローカルマシンにインストールしましたが、デフォルトのテンプレートはHMTLと混合して以下を吐き出します。 <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": { "components": { "customer": { "component": "Magento_Customer/js/view/customer" } } } } } </script> そして、のような呼び出し <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": { "components": { "messages": { "component": "Magento_Theme/js/view/messages" } } } } } </script> これはと行うことですKnockoutJSかRequireJS？これらの呼び出しは何で、この新しいスクリプトタグは何ですか<script type="text/x-magento-init">

29 magento-enterprise  magento2  frontend  knockoutjs 

私は、テキストの翻訳を追加しようとしています<!-- ko i18n: 'Store credit available' --><!-- /ko -->に存在するvendor/magento/module-customer-balance/view/frontend/web/template/payment/customer-balance.htmlが、私は私の中でテキストを変更しようとした場合i18n/en_US.csv、まだその動作していません、。 キャッシュをフラッシュし、静的コンテンツの展開を使用しました。 KOテンプレートの翻訳を追加する別の方法はありますか？

24 magento2  knockoutjs  inline-translations  js-translation 

多くのMagentoバックエンドページのソースコードには以下が含まれています <!-- ko template: getTemplate() --><!-- /ko --> 私はそれを理解しています（またはそう思いますか？）、これ<!-- ko templateはKnockoutJSのコンテナーなしのテンプレートバインディングです。 私には明らかでないのは、getTemplate()関数が呼び出されるコンテキストは何ですか？私がオンラインで見た例では、通常、の後にjavascriptオブジェクトがありtemplate:ます。私はそれgetTemplateがオブジェクトを返すjavascript関数であると仮定しています-しかし、という名前のグローバル javascript関数はありませんgetTemplate。 どこにgetTemplate縛られていますか？または、より良い質問かもしれませんが、KnockoutJSアプリケーションバインディングはMagentoバックエンドページのどこで発生しますか？ 純粋なHTML / CSS / Javascriptの観点からこれに興味があります。Magento 2には多くの構成の抽象化があるため、（理論上）開発者は実装の詳細について心配する必要はありません。実装の詳細に興味があります。

19 magento2  knockoutjs 

KnockoutJSドキュメントを非常に大まかに読むと、非常に基本的なKnockoutビューの初期化は次のようになります。 // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.firstName = "Bert"; this.lastName = "Bertington"; } // Activates knockout.js ko.applyBindings(new AppViewModel()); つまり、オブジェクトコンストラクターとして使用するjavascript関数を作成し、そこからオブジェクトをインスタンス化し、そのオブジェクトをko.applyBindingsグローバルノックアウトオブジェクトのメソッドに渡します（ko） ただし、Magento 2では、グリッドUIでバックエンドページをロードすると、Magentoはjs/core/app.jsRequireJSモジュールを初期化します /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license …

19 magento2  javascript  requirejs  knockoutjs 

[ 「タイプ」=>「int」、 'backend' => ''、 'frontend' => ''、 'label' => 'XXXX'、 「入力」=>「テキスト」、 'frontend_class' => 'ゼロより大きい検証'、 'source' => ''、 'global' => \ Magento \ Eav \ Model \ Entity \ Attribute \ ScopedAttributeInterface :: SCOPE_GLOBAL、 'visible' => true、 '必須' => true、 'user_defined' => false、 'default' => 0、 'searchable' => false、 'filterable' …

17 magento2  javascript  jquery  form-validation  knockoutjs 

Magentoの2のUIフォーム部品のコンフィギュレーションファイルでは、多くの場合、表示されますitemが同じで属性をsource- <item name="source" xsi:type="string">block</item>以下。 #File: vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml <field name="title"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Block Title</item> <item name="formElement" xsi:type="string">input</item> <item name="source" xsi:type="string">block</item> <item name="sortOrder" xsi:type="number">20</item> <item name="dataScope" xsi:type="string">title</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> </argument> </field> これらのフィールドは何のためのものですか？必要ではないようだからお願いします。たとえば、このGitHubリポジトリのモジュールは 、動作するUIコンポーネントフォームを構成しますが、これらのname="source"アイテムは使用しません。 誰もがこれらのname="source"アイテムの目的を知っていますか？XMLを取得し、x-magento-initJSON として構成するUIコンポーネントメカニズムを知っています。 "block_id": { …

17 magento2  uicomponent  forms  knockoutjs  requirejs 

私は、Merchant beta 1.0.0バージョンでMagentoの新しいバックエンドグリッドシステムをいじくり回しています。 まず第一に、私は感銘を受けたと言わなければなりません。 表示する列を選択したり、並べ替えたり、必ずしも列を持たない属性でフィルタリングしたりできるようになりました。 しかし、それは重要ではありません。 グリッドのレンダリング方法がわかりません。 テンプレートパスヒントを有効にすると、たとえば製品グリッドがテンプレートapp/code/Magento/Ui/view/base/ui_component/templates/listing/default.xhtmlとブロックを介してレンダリングされることがわかりましたMagento\Ui\Component\Listing。 テンプレートを編集して、理解できないものを見ました。 <!-- ko template: getTemplate() --><!-- /ko --> この行を削除した場合（有効になっている場合はキャッシュをクリアした場合）、グリッドはもう表示されません。 誰かがこれkoが何であり、どのように機能するかを説明できますか？ 他のテンプレートにもこの種のマークアップがあります。 app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html例えば。 [更新] http://knockoutjs.com/ をko参照する簡単な検索（duh！）で見つけましたが、まだ説明が必要です。

15 magento2  grid  magento-2.0  knockoutjs 

まず第一に、私の問題を理解するためにいくつかのスクリーンショットを提供したいと思います。 ここで、関連するコードをここに追加します。 etc / frontend / di.xml <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Checkout\Model\CompositeConfigProvider"> <arguments> <argument name="configProviders" xsi:type="array"> <item name="checkout_deliverysign_block" xsi:type="object">Kensium\DeliverySign\Model\DeliverySignConfigProvider</item> </argument> </arguments> </type> </config> DeliverySignConfigProvider <?php namespace Kensium\DeliverySign\Model; use Magento\Checkout\Model\ConfigProviderInterface; use Magento\Store\Model\ScopeInterface; class DeliverySignConfigProvider implements ConfigProviderInterface { /** * @var \Magento\Framework\App\Config\ScopeConfigInterface */ protected $scopeConfiguration; protected $checkoutSession; protected $logger; /** …

14 magento2  checkout  knockoutjs 

Magento 2のチェックアウトの概要セクションにあるアイテムのリストにカスタム製品属性を追加しようとしています。テンプレートファイルがMagento_Checkout/web/template/summary/item/details.htmlあり、製品名の前にカスタム属性の値を表示しようとしています。この値がkoテンプレートにどのように追加されるかについてのアイデアはありますか？ここに別の質問があるようですが、答えがありませんでした。

14 magento2  magento-2.1  knockoutjs 

私が知る限り、Magentoのバックエンドでグリッドを表示すると、次の「XHRにロードされた」KnockoutJSテンプレートが物事のレンダリングを開始します File: vendor/magento//module-ui/view/base/web/templates/collection.html URL: http://magento.example.xom/pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/collection.html <each args="data: elems, as: 'element'"> <render if="hasTemplate()"/> </each> しかし、私は<each/>タグと<render/>タグが何であるかについて少し損をしています。それらは、ストックKnockoutJSの一部ではありません（またはそうではないようです）。 componentsを介してKnockoutJSにカスタムタグを追加できることは知っていますが、KnockoutJSに名前が付けられたコンポーネントeachまたはrenderKnockoutJSに追加された明白な場所は見当たりません。 ですから、これらが私が知らない場所に登録されたコンポーネントなのか、MagentoがKnockoutJSに対して行ったカスタムタグなどを完全にカスタマイズしたものなのかはわかりません。 注：私はここで完全に暗闇ではありません<each/>-JSONでレンダリングされたすべての子UIコンポーネントを反復処理し、そのテンプレートをレンダリングします（そのテンプレートが存在する場合）。 私がまったく明らかにしていないのは、これらのタグの実装方法です。データがどのようにバインドされているかをデバッグできるように、それらが実装されている場所を確認し、他のタグがある場合にMagentoがこれらのタグを作成するために使用するメカニズムを理解します。

13 magento2  javascript  template  knockoutjs 

注文ボタンを支払いからチェックアウトページのサイドバーに移動したい。 誰でも私に提案を与えることができますか？ 編集：これは可能です（回答/アプローチが提供されています）？ 私の調査から、すべての支払い方法には、独自のボタンを含む独自の.htmlテンプレートがあります。このボタンは、knockout.jsテンプレートからは読み込まれません。たとえば、「無料」の支払い方法の一部： <div class="checkout-agreements-block"> <!-- ko foreach: $parent.getRegion('before-place-order') --> <!-- ko template: getTemplate() --><!-- /ko --> <!--/ko--> </div> <div class="actions-toolbar"> <div class="primary"> <button class="action primary checkout" type="submit" data-bind=" click: placeOrder, attr: {title: $t('Place Order')}, css: {disabled: !isPlaceOrderActionAllowed()} "> <span data-bind="i18n: 'Place Order'"></span> </button> </div> </div> 「小切手/為替」の支払い方法は次のようになります（違いのみですenable: (getCode() == …

13 magento-2.1  onepage-checkout  knockoutjs  place-order 

私はmagento2。特にカスタムテンプレートバインディングのknockoutjsを理解しようとしていますが、これをレンダリングするアイデアの流れを得ることができません。 誰もそれがどのように機能するかを知ることができますか？少なくともgetTemplateの定義はどこにありますか？ <!-- ko if: (!quoteIsVirtual) --> <!-- ko foreach: getRegion('customer-email') --> <!-- ko template: getTemplate() --><!-- /ko --> <!--/ko--> <!--/ko-->

12 magento2  knockoutjs 

次のようなUIコンポーネントプロパティの使用方法imports: {}とexports: {}共有方法を理解しています。 defaults: { exports: { shouldShowMessage: '${$.component}' } } エクスポートでコンポーネント名を返します。 しかし、Knockoutオブザーバブルをエクスポートしようとすると、常に未定義になります。 defaults: { exports: { shouldShowMessage: '${$.shouldShowMessage}' } } ... setupKoBindings: function() { this.shouldShowMessage = ko.observable('Testing'); } 回避策として、ここで説明するようにストレージモデルを作成しますが、インポートとエクスポートを使用したいと思います。

12 magento2  javascript  uicomponent  knockoutjs  requirejs 

私の問題： Magento 2内で小さなKnockout JSアプリを書き込もうとしています。アプリを使用するko.applyBindings(AppViewModel, document.getElementById("koTest"));と、Magentoで使用されるKnockoutが壊れてこのエラーがスローされるため、アプリの初期化に苦労しています。 Uncaught Error: You cannot apply bindings multiple times to the same element. 私はそれが原因だと思います： これは、Magento 2が既にko.applyBindings()内で使用しているためと考えられますapp/code/Magento/Ui/view/base/web/js/lib/knockout/bootstrap.js。そして、それはノードを指定しないので、ko.applyBindings再び使用することはできません。 ko.applyBindings(AppViewModel, document.getElementById("koTest"))コードで使用しないと、アプリが初期化されません。 これは私が何らかの形ko.applyBindings()でknockout / bootstrap.jsを使用する必要があると思いますが、私はどのようにしたらいいのか分かりません、誰も助けることができますか？私はノックアウトの経験がほとんどありません。 私のコード <script type="text/javascript"> require([ 'ko' ], function(ko) { // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI …

12 magento2  knockoutjs 

更新：ビューモデルに直接アクセスできます。レンダリング後に実行するコードをトリガーする必要がある場合は、MutationObserverを使用します。良い例ができたらすぐにコードを投稿します。 元の質問： 電話での注文がたくさんあります。私は、admin-> customer-> webapi / jsonp呼び出しを使用してCRMソリューションから新規作成するデータを自動入力するモジュールに取り組んでいます。このようにして、magentoのデータは、すでに「マスターデータベース」に保存したデータの複製を作成しません。 私がまだやらなければならない1つのタスクは、お客様の住所を追加することです。これは、kockoutjs + magentojsが顧客フォームのすべてをレンダリングしていることが、テンプレート化された要素のキャプチャを妨げていることに気づくまで、最初は簡単に思えました。プログラムですべてのアドレスを削除し、新しいアドレスを作成した後、フィールドセット（入力要素）をキャプチャしようとするのにかなり時間がかかっています。 なぜ私がそうするのかと思うと、私のコードの一部がポップアップ表示され、「こんにちは、この人物は既に存在します。それらを使用しますか？」すでに入力したものはすべて削除され、正しい情報に置き換えられます。次に、コールセンターがそれを検証します、yadda yadda。 ここまでのコードを共有しますが、正しく機能しません。ちなみに、これは「onUpdate」イベントをキャッチするためにAbstractを拡張しています。コレクションアイテム内のコレクションへのアクセスを試みたとして、私を非難しないでください。onUpdateイベントをキャッチし、すべてのフィールドを確認するためのより良い方法を思いつくことはできません。 私はまた、何が悪いのかを完全に理解しています。どうすればそれを回避できるのかわかりません。何が問題なのか、私は.activate（）呼び出しによって生成された要素が以下ですぐに利用可能になると想定 document.getElementsByClassName（ 'admin__fieldset'） これは間違ったロジックです。理想的には、このUIのトリックに頼ることなくフィールドセットのコンテンツをプルできるようにして、すべてを設定したらレンダリングするだけです。 私は、domの更新を監視するためにjQueryハックに頼りたくありません。 // jsonService variable is available here because it is in the php template render. see // Stti/Customer/view/adminhtml/templates/javascriptinject.phtml define(['ko','jquery','underscore','originalAbstract','uiElement', 'uiCollection'], function(ko, $, _, Abstract, Element, Collection) { "use strict"; var theArray = { …

11 magento2  adminhtml  magento-2.0  render  knockoutjs