Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

MAGEDOC-2893: Magento binding syntax #2126

Merged
merged 4 commits into from
Jun 7, 2018
Merged

Conversation

bdenham
Copy link
Contributor

@bdenham bdenham commented Jun 6, 2018

This PR is a:

  • New topic
  • Content fix or rewrite
  • Bug fix or improvement

Summary

When this pull request is merged, it will create a new topic that shows developers how to use the Magento binding syntax for UI components instead of the more complex Knockout binding equivalents.

Additional information

HTML preview: http://cicd1.corp.magento.com/~mmansoor/devdocs/gh-pages/branches/bd-magedoc-2893-mage-binding/_site/guides/v2.2/ui_comp_guide/concepts/magento-bindings.html
Jira story: https://jira.corp.magento.com/browse/MAGEDOC-2893

whatsnew
Added a topic about the Magento binding syntax.

@bdenham bdenham added Tracking Created an internal Jira ticket to track work New doc 2.2.x 2.3.x Magento 2.3 related changes Technical Updates to the code or processes that alter the technical content of the doc labels Jun 6, 2018
@bdenham bdenham self-assigned this Jun 6, 2018
|textInput |`<input data-bind="textInput: value"/>` | `<input textInput="value"/>` |
|value |`<input data-bind="value: value"/>` | `<input ko-value="value"/>` |
|checked |`<input type="chackbox" data-bind="checked: isChecked"/>` | `<input type="chackbox" ko-checked="isChecked"/>` |
|checkedValue |`<input type="chackbox" data-bind="checkedValue: $data, checked: isChecked"/>` | `<input type="chackbox" checkedValue="$data" checked="isChecked"/>` |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Append the following on the next line of this table to get a better table format:

{:style="table-layout:auto"}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, awesome. will do.

|foreach |`<!-- ko foreach: elements --><!-- /ko -->` | `<each args="elements">` |
| |`<div data-bind="foreach: elements"></div>` | `<div each="elements"></div>` |
|component |`<!-- ko component: 'componentName' --> <!-- /ko -->` | `<component args="'componentName'">` |
| |`<div data-bind="component: componentName"> </div>` | `<div component="'componentName'"> </div>` |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<div data-bind="component: componentName"> </div> missed single quotes -> <div data-bind="component: 'componentName'"> </div>

|hasFocus |`<input data-bind="hasFocus: onFocus"/>` | `<input ko-focused="onFocus"/>` |
|textInput |`<input data-bind="textInput: value"/>` | `<input textInput="value"/>` |
|value |`<input data-bind="value: value"/>` | `<input ko-value="value"/>` |
|checked |`<input type="chackbox" data-bind="checked: isChecked"/>` | `<input type="chackbox" ko-checked="isChecked"/>` |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type="chackbox"->type="checkbox"

|textInput |`<input data-bind="textInput: value"/>` | `<input textInput="value"/>` |
|value |`<input data-bind="value: value"/>` | `<input ko-value="value"/>` |
|checked |`<input type="chackbox" data-bind="checked: isChecked"/>` | `<input type="chackbox" ko-checked="isChecked"/>` |
|checkedValue |`<input type="chackbox" data-bind="checkedValue: $data, checked: isChecked"/>` | `<input type="chackbox" checkedValue="$data" checked="isChecked"/>` |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type="chackbox"->type="checkbox"

@bdenham
Copy link
Contributor Author

bdenham commented Jun 7, 2018

Thanks @omiroshnichenko. Good catches!

@bdenham bdenham merged commit ef321d3 into develop Jun 7, 2018
@bdenham bdenham deleted the bd-magedoc-2893-mage-binding branch June 7, 2018 14:56
@dshevtsov dshevtsov removed the Technical Updates to the code or processes that alter the technical content of the doc label Jun 11, 2018
@dshevtsov
Copy link
Collaborator

@bdenham please add whatsnew

@dshevtsov
Copy link
Collaborator

I added the whatsnew.

@lorikrell lorikrell added New Topic A major update published as an entirely new document and removed New doc labels Mar 25, 2019
magento-cicd2 pushed a commit that referenced this pull request Mar 9, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
2.2.x 2.3.x Magento 2.3 related changes New Topic A major update published as an entirely new document Tracking Created an internal Jira ticket to track work
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants