marko - npm Package Compare versions

Comparing version 1.3.26 to 1.3.27

compiler/ElementNode.js

@@ -227,2 +227,5 @@ /*
                 template.text(' ' + name);
+            } else if (attr.value === '') {
+                // Treat empty attributes as boolean attributes
+                template.text(' ' + name);
             } else if (template.isExpression(attr.value)) {
@@ -229,0 +232,0 @@ template.attr(name, attr.value, attr.escapeXml !== false);

package.json

@@ -61,3 +61,3 @@ {
     },
-    "version": "1.3.26"
+    "version": "1.3.27"
 }

README.md

@@ -45,3 +45,4 @@ Marko
         - [if...else-if...else](#ifelse-ifelse)
-        - [Shorthand conditionals](#shorthand-conditionals)
+        - [Shorthand Conditionals](#shorthand-conditionals)
+        - [Conditional Attributes](#conditional-attributes)
     - [Looping](#looping)
@@ -715,3 +716,3 @@ - [for](#for)
 
-### Shorthand conditionals
+### Shorthand Conditionals
 
@@ -752,2 +753,39 @@ Shorthand conditionals allow for conditional values inside attributes or wherever expressions are allowed. Shorthand conditionals are of the following form:
 
+### Conditional Attributes
+
+Marko supports conditional attributes when the value of an attribute is an expression. Marko also supports [HTML `boolean` attributes](https://html.spec.whatwg.org/#boolean-attributes) (e.g., `<input type="checkbox" checked>`)  If an attribute value resolves to `null`, `undefined`, `false`  or an empty string then the attribute will not be rendered. If an attribute value resolves to `true` then only the attribute name will rendered.
+
+For example, given the following data:
+
+```javascript
+{
+    title: '',
+    active: true,
+    checked: false,
+    disabled: true
+}
+```
+
+And the following template:
+
+```html
+<img src="foo.png" alt="${data.title}">
+
+<div class="{?data.active;tab-active}"></div>
+
+<input type="checkbox"
+    checked="${data.checked}"
+    disabled="${data.disabled}">
+```
+
+The output HTML will be the following:
+
+```html
+<img src="foo.png">
+
+<div></div>
+
+<input type="checkbox" disabled>
+```
+
 ## Looping
@@ -1619,4 +1657,4 @@
 
-* Async Fragments Demo using Marko: In-order versus out-of-order rendering [source](https://github.com/raptorjs-samples/marko-progressive-rendering) [demo](https://marko-progressive-rendering.herokuapp.com/)
-* UI Components Playground [source](https://github.com/raptorjs-samples/ui-components-playground) [demo](https://ui-components-playground.herokuapp.com/)
+* Async Fragments Demo using Marko: In-order versus out-of-order rendering [source](https://github.com/raptorjs-samples/marko-progressive-rendering) | [demo](https://marko-progressive-rendering.herokuapp.com/)
+* UI Components Playground [source](https://github.com/raptorjs-samples/ui-components-playground) | [demo](https://ui-components-playground.herokuapp.com/)
 
@@ -1623,0 +1661,0 @@ ## Tools

test/render-test.js

@@ -359,2 +359,16 @@ 'use strict';
     });
+
+    it("should support boolean attributes", function(done) {
+        testRender("test-project/html-templates/boolean-attributes.marko", {
+            options: [
+                {  value: 'red', selected: false },
+                {  value: 'green', selected: true },
+                {  value: 'blue', selected: false }
+            ],
+            disabled: false,
+            checked: true
+        }, done);
+    });
+
+
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

450280

increased by0.45%

Number of package files

376

increased by0.53%

Lines of code

8190

increased by0.17%

Number of lines in readme file

1679

increased by2.32%

No dependency changes