Skip to content

Instantly share code, notes, and snippets.

@kaleb

kaleb/README.md

Last active August 29, 2015 14:19
Show Gist options
  • Save kaleb/f90a79e3275fe5dc21c8 to your computer and use it in GitHub Desktop.
Save kaleb/f90a79e3275fe5dc21c8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kaleb revised this gist Apr 14, 2015. 1 changed file with 12 additions and 2 deletions.
    14 changes: 12 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <h2>Static Items 1 through 3</h2>
    <h2>Static - Items 1 through 3</h2>

    <custom-element>
    <span>item 1.1</span>
    @@ -11,7 +11,17 @@ <h2>Static Items 1 through 3</h2>

    <hr />

    <h2>Dynamic Items 1 through 3</h1>
    <h2>Dynamic Attempt 1 - Items 1 through 3</h1>

    <custom-element>
    <!-- ko foreach: { data: ['item 2.1', 'item 2.2', 'item 2.3'], as: 'item' } -->
    <span data-bind="text: item"></span>
    <!-- /ko -->
    </custom-element>

    <hr />

    <h2>Dynamic Attempt 2 - Items 1 through 3</h1>

    <custom-element data-bind="foreach: { data: ['item 2.1', 'item 2.2', 'item 2.3'], as: 'item' }">
    <span data-bind="text: item"></span>
  2. kaleb revised this gist Apr 13, 2015. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,3 +3,6 @@ Purpose

    I would like to be able to have a Knockout custom component that can have
    either static content or dynamic content using the foreach binding.


    [view demo](http://bl.ocks.org/kaleb/f90a79e3275fe5dc21c8)
  3. kaleb revised this gist Apr 13, 2015. 2 changed files with 11 additions and 1 deletion.
    5 changes: 5 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    Purpose
    =======

    I would like to be able to have a Knockout custom component that can have
    either static content or dynamic content using the foreach binding.
    7 changes: 6 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,8 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <h2>Static Items 1 through 3</h2>

    <custom-element>
    <span>item 1.1</span>
    <span>item 1.2</span>
    @@ -8,6 +11,8 @@

    <hr />

    <h2>Dynamic Items 1 through 3</h1>

    <custom-element data-bind="foreach: { data: ['item 2.1', 'item 2.2', 'item 2.3'], as: 'item' }">
    <span data-bind="text: item"></span>
    </custom-element>
    @@ -17,7 +22,7 @@
    <script id="tmpl" type="text/html">
    <!-- ko foreach: { data: $componentTemplateNodes, as: 'node' } -->
    <!-- ko if: node.nodeType == 1 -->
    <h1 data-bind="template: { nodes: [node] }"></h1>
    <h3 data-bind="template: { nodes: [node] }"></h3>
    <!-- /ko -->
    <!-- /ko -->
    </script>
  4. kaleb revised this gist Apr 13, 2015. 2 changed files with 19 additions and 10 deletions.
    23 changes: 19 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,10 +8,25 @@

    <hr />

    <custom-element data-bind="foreach: ['item 2.1', 'item 2.2', 'item 2.3']"></custom-element>
    <custom-element data-bind="foreach: { data: ['item 2.1', 'item 2.2', 'item 2.3'], as: 'item' }">
    <span data-bind="text: item"></span>
    </custom-element>

    <script src="//rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>
    <script src="main.js"></script>

    <script id="tmpl" type="text/html">
    <!-- ko template: { foreach: $componentTemplateNodes, nodes: [$data] } --><!-- /ko -->
    </script>
    <!-- ko foreach: { data: $componentTemplateNodes, as: 'node' } -->
    <!-- ko if: node.nodeType == 1 -->
    <h1 data-bind="template: { nodes: [node] }"></h1>
    <!-- /ko -->
    <!-- /ko -->
    </script>

    <script>
    ko.components.register('custom-element', {
    template: {
    element: 'tmpl'
    }
    });
    ko.applyBindings();
    </script>
    6 changes: 0 additions & 6 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +0,0 @@
    ko.components.register('custom-element', {
    template: {
    element: 'tmpl'
    }
    });
    ko.applyBindings();
  5. kaleb created this gist Apr 13, 2015.
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <custom-element>
    <span>item 1.1</span>
    <span>item 1.2</span>
    <span>item 1.3</span>
    </custom-element>

    <hr />

    <custom-element data-bind="foreach: ['item 2.1', 'item 2.2', 'item 2.3']"></custom-element>

    <script src="//rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>
    <script src="main.js"></script>
    <script id="tmpl" type="text/html">
    <!-- ko template: { foreach: $componentTemplateNodes, nodes: [$data] } --><!-- /ko -->
    </script>
    6 changes: 6 additions & 0 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    ko.components.register('custom-element', {
    template: {
    element: 'tmpl'
    }
    });
    ko.applyBindings();