It would be useful to clone from an array of simple values.

Example usage:

<div id=book class=dna-template>
   Title #<span>~~[count]~~</span>: <span>~~[value]~~</span>
</div>

dna.clone('book', ['CSS3', 'HTML5']);

result:

<div>Title #<span>1</span>: <span>CSS3</span></div>
<div>Title #<span>2</span>: <span>HTML5</span></div>

Given the URL:
http://example.com?lang=jp&code=7
dna.browser.getUrlParams() should return: { lang: 'jp', code: 7 }

dna.browser.getUrlParams():
https://github.com/dnajs/dna.js/blob/master/dna.js#L247

JSDOM:
https://github.com/tmpvar/jsdom#simple-options

Currently, data transformation functions are specified in HTML:

<div id=book class=dna-template data-transform=enhanceBook>

It might be more intuitive in JS:

dna.clone('book', books, { transform: enhanceBook });

dna.js: line 311, col 7, 'sessionStorage' is not defined.
dna.js: line 317, col 19, 'sessionStorage' is not defined.

dna.browser.iOS():
https://github.com/dnajs/dna.js/blob/master/dna.js#L206

JSDOM:
https://github.com/tmpvar/jsdom#simple-options

In the "jshintConfig" section of package.json, add "singleGroups": true to show places in the code that have an unnecessary grouping operator.

See:
https://jshint.com/docs/options/#singleGroups

After updating package.json, you can see the lines of code that need fixing by running:

$ npm install
$ npm test

Upgrade to modern ES6 function definitions for the top-level functions. The newer notation is more compact and looks better.

There are about 20 functions to update (all in the dna.js file):

• dna.clone()
• dna.cloneSub()
• dna.createTemplate()
• ...
• dna.info()

For example, change:

clone: (name, data, options) => {

to:

clone(name, data, options) {

See line 29:
https://github.com/dnajs/dna.js/blob/master/dna.js#L29

If the data field is missing when cloning a template, the current error message is very confusing. There should be an clear, explicit error message when data is undefined.

const data = undefined;
dna.clone('book', data);  //should immediately throw an error

Hey guys, I was checking the docs, but I can't find a way to use a function in the data-click (or any attribute that expects a function) that is not exposed to the window object. I'm using webpack to ship my files so I don't use object namespaces (like window.MyApp.module.func). Any help is appreciated, Thanks!

Allow loading of dna.js through a module loading system such as CommonJS or RequireJS.

Currently, smart update callbacks are specified at the element level:

<input value=~~title~~ data-smart-update=saveTitle>

This often necessitates annotating many input tags in the template with data-smart-update (or data-change).

It would be more convenient to annotate higher up at the template level:

<div id=book class=dna-template data-smart-update=saveBook>

The callback could be sent the clone's updated data model and the input element that triggered the update:

const saveBook = (dataModel, targetElem) => { ... }

https://dnajs.org/docs/#event-smart

Add a function called dna.array.fromMap() to compliment dna.array.toMap()

Example <a href=# data-click=doSomething> test </a>

Value returned from doSomething is ignored!

Configure the project to enforce the JSHint rule that prohibits var statements.

See "jshintConfig" in package.json:
https://github.com/dnajs/dna.js/blob/master/package.json#L27

JSHint documentation:
https://jshint.com/docs/options/#varstmt

dna model does not get updated when calling destroy() of an element that is part of an dna array.

Currently data-attr-type only supports the value date. We need to add support for color, time, etc.

Example:

<input data-attr-type=color value=~~profileColor~~>

becomes

<input type=color value=#DAA520>

Note:

<input type=color value=~~profileColor~~>

results in the warning:
The specified value "~~profileColor~~" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

Similar to dna.bye(), add dna.up() and dna.down() to move a clone.

Parameters:

1. elemOrEventOrIndex (optional)
2. options (default: { steps: 1, fade: true })

Reference:
http://dnajs.org/manual.html#api-bye

TodoMVC:
http://todomvc.com

Sample Todo app:
https://jsfiddle.net/uLrc7kmp

In Chrome:

<input type=date value=~~pubDate~~>

results in:

The specified value "~~pubDate~~" does not conform to the required format, "yyyy-MM-dd".

http://jsfiddle.net/zjL1ntnd/

Enhance:

dna.ui.slideFadeToggle(elem[, callback])

to be:

dna.ui.slideFadeToggle(elem[, boolean][, callback])

See:
http://dnajs.org/docs#ui-slide-fade

Update to gulp 4.0 to avoid:

Are you planning on adding new features? I'd suggest adding simple support for conditionals, something like

<div>
   <h2>Featured Books</h2>
   <div id=book class=dna-template>
      <div>Title:  <span>~~title~~</span></div>
      ~~#author?~~<div>Author: <span>~~author~~</span></div>~~/author?~~
   </div>
</div>

to check if some object is missing or empty and act in consequence.

That would be really helpful for prototyping ;)

Example:

<div id=book class=dna-template data-count=~~[count]~~>
   <p>~~[count]~~</p>
</div>

The data-count attribute should be set, but it's coming up undefined.

Assert:

dna.clone('book', ['The DOM', 'Interwebz']).first().data().count === '1'

Reference:
http://dnajs.org/docs#loop-primitives

Logo Design Contest

The current project logo for dna.js is pretty uninspiring and is just a placeholder until a real graphic artist creates an inspiring logo.

dnajs-logo.png

Logo Goals:

1. Clean, simple, and modern
2. Scalable so it looks good at different sizes
3. Incorporation of an animal mascot would be cool (but not required)
4. Slots nicely into the dna.js website: dnajs.org

Some words for design inspiration:
Clone, template, DNA, data, easy, clean, fast, JavaScript, HTML, jQuery

The artist who's logo is used for the project will get recognized on the dna.js website with a link to your portfolio (and if you can get to San Francisco, a drink of your choice plus an Apple Store Gift Card for a hundred dollars).

Attach your artwork to this GitHub issue. Also, feel free to post any questions or comments below.

Important Note:
dna.js is an open source project and graphics contributed to the project are licensed under MIT/GPL.

Add a clones option to support cloning a template an arbitrary number of times.

For example, to make seven Audi TT cars:

dna.clone('car', { make: 'Audi', model: 'TT' }, { clones: 7 });

http://dnajs.org/docs/#api-clone

Problem description:

[15:09:40] Starting 'default'...
[15:09:40] Finished 'default' after 15 μs
[15:09:40] Size dna.min.js : 16.06 kB
dna.js: line 5, col 5, Redefinition of 'dna'.

1 error

Problem fixed when:

There is no redefinition of dna.

Upgrade to more modern ES6 function definitions.

For example, change:

   clone: (name, data, options) => {

to:

   clone(name, data, options) {

The newer notation is more compact and looks better.

See MDN web docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

Example:

<textarea>~~plot~~</textarea>
<p>~~plot~~</p>

As the user edits the plot in the <textarea>, the value displayed in the <p> element should be dynamically updated.

Note: This capability already exists for <input> elements. You can test is out by editing one of the fields under "Tags:" in test case 16 at: dnajs.org/spec/visual.html#spec16

https://github.com/dnajs/dna.js/blob/master/package.json#L34

jshint is currently run on gulpfile.js and but should also run on spec/*.js.

The function assert.deepEqual() has been deprecated.

Replace with:
assert.deepStrictEqual()

And remove the old “Strict assertion mode” by changing:

const assert = require('assert').strict;

to:

const assert = require('assert');

See spec/arrays.js file:
https://github.com/dnajs/dna.js/blob/master/spec/arrays.js#L24

For multiline arrays and objects, the consistency of including a comma for the last item makes the code easier to edit and helps reduce merge diffs.

See:
https://jshint.com/docs/options/#trailingcomma

In the file:
spec/arrays.js

change:

const array =    [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' }  //no comma
   ];

to:

const array =    [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' },  //with comma
   ];

Create a new function dna.templateExists() to support checking if a template exists before cloning the template.

Example usage:

if (dna.templateExists('book'))
   dna.clone('book', { title: 'JavaScript: The Good Parts' });

Check if it makes sense for dna.core.berserk to throw an Error object instead of just a message string. Browser support?

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error

Add a new function dna.templateExists() to check if a template is present.

Below are the steps to follow to build this feature using Test-Driven Development (TDD).

1. Verify all existing tests pass

$ npm test

2. Create a test case in spec/dom.js for the new feature
Add this code:

describe('Function dna.templateExists()', () => {
   it('identifies if a template is present', () => {
      const actual =   [dna.templateExists('book'), dna.templateExists('bogus')];
      const expected = [true, false];
      assert.deepEqual(actual, expected);
      });
   });

3. Verify the new test case FAILS
The feature is not built yet, but you can still run the test case:

$ npm test

4. Create the new function in dna.js
At line 71, insert:

templateExists: (name) => {
   return !!dna.store.templates[name] || $('.dna-template#' + name).length > 0;
   },

5. Verify the new test case PASSES

$ npm test

For a callback:

<div id=book class=dna-template data-callback=addStyle>

it's possible to do var data = dna.getDataModel(cloneElem); in the addStyle function, but it would be easier to support:

function addStyle(cloneElem, data) {
   ...

Documentation:
http://dnajs.org/docs/#event-element-callback

Hello,

i just began to "play" with dna.js, and i find it is great
but i think i may have found a bug, or at least something i do not understand.

in the attached example, ( test.txt - to be renamed as test.html )
the second template is rendered AFTER the last HR despite it is positioned before.
and more, if you remove or comment the last HR the template is not rendered at all !

tested on firefox and chromium.
reproduce problem with dna.js 1.3.4 and 1.3.7

test.txt

For multiline arrays and objects, the consistency of including a comma for the last item makes the code easier to edit and helps reduce merge diffs.

See:
https://jshint.com/docs/options/#trailingcomma

In the file:
spec/arrays.js

change:

const array = [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' }  //no comma
   ];

to:

const array = [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' },  //with comma
   ];

Something like:

<input value=~~title~~ data-prop-disabled=~~!show~~>

to produce:

<input value="A Tale Of Two Cities" disabled>

when show is false.

Hello,

dna.js worked great for me until i tried to use nested objects. I see there is a TODO at Spec runner source code. Is it easy to implement? It would be really cool if i won't have to flatten all nested object from model to allow editing through input fields.

Thanks!

See similar issue:
ducksboard/gridster.js#422

For improved readability, modernize all occurrences of:

const settings = Object.assign(defaults, options);

to:

const settings = { ...defaults, ...options };

Hi,
in a select, when I use data-option doesn't work. This is the error:

dna.js:672 Uncaught TypeError: Cannot read property 'option' of undefined
at updateModel (dna.js:672)

If I use data-dnaRules-option works....

Could be a bug here?

...... else if (target.is('input') || target.data().dnaRules.option)

convert spec.js to ES6.
-- var to let or const (as appropriate)
-- require to import (not yet supported natively in Node (not supported in V8); would need to wait for next engine or babel-ify the tests)

First off - I'm really liking this library so far - I find it very easy to grok!

This may be a bit off topic, and I apologise if I missed something in the docs, but how would you conditionally show or hide something based on whether an array was populated or not. I can see this is available at the field level using the data-require attribute, but what if you wanted to show a button to remove all cloned elements, but only if elements had been cloned.

Is there a way with dnajs? I'm used to angular, where this functionality is available using the native ng-show and ng-hide directives.

Cheers, Rob