Skip to content

Loading…

(jQuery template foreach) + (spaces around = in data-bind attribute) = exception #375

Merged
merged 1 commit into from

3 participants

@mwcz

The HTML5 spec allows for any number of spaces between an attribute name and the equals sign, and between the equals sign and the attribute value. Such as:

    <p class             =     

    "myclass" />

HTML5 Source (I can't find an explicit reference in the HTML 4.01 spec, but I haven't ever met a browser that didn't like spaces.)

I ran into an issue where I had an element with data-bind inside a template. Here is the exact template, from my ColorPal project:

    <script id="CP_PaletteTemplate" type="text/html">
        <div id="cp-swatches"
             data-bind = "visible: palette_created()">
        {{each(index,hex) colors}}
        <div 
                class = "cp-border cp-swatch grid_3 " 
                   id = "cp-swatch-${index}" 
            data-bind = "style: { backgroundColor: hex }"> <!-- problem line -->
        </div>
        {{/each}}
        </div> <!-- /#cp-swatches -->
    </script>

Note the spaces on either side of the equals sign. This resulted in:

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: hex is not defined;
Bindings value: style: { backgroundColor: hex }

Only the data-bind attribute inside the template's foreach loop was problematic. hex is defined, and the exception goes away when I remove the spaces, like so:

data-bind="style: { backgroundColor: hex }"

I have a fix to the data-bind regex (memoizeDataBindingAttributeSyntaxRegex) and will submit a pull request right away. I just wish I knew what the strange interplay is between jQuery.tmpl's foreach and Knockout.

@mwcz mwcz pushed a commit to mwcz/knockout that referenced this pull request
mwcz allow spaces around "=" in data-bind attr #375 25e5d2f
@mwcz

I would like to add a test for this as well. How should I go about making external libraries (jQuery & jQuery.tmpl) available during testing?

@mbest mbest closed this
@mbest mbest reopened this
@mbest mbest referenced this pull request
Closed

May 2013 Iteration #945

9 of 9 tasks complete
@SteveSanderson SteveSanderson merged commit c03c5ee into master
@SteveSanderson SteveSanderson deleted the 375-data-bind-attribute-spaces branch
@SteveSanderson

No objections here. Thanks :+1:

@mbest mbest added a commit that referenced this pull request
@mbest mbest Merge pull requests #462, #929, #486, #970, #375, #964 from version 2…
….3.0 branch to version 3.0.0 branch

Conflicts:
	src/binding/defaultBindings/options.js
b0cc50a
@mbest mbest added a commit that referenced this pull request
@mbest mbest Merge pull requests #462, #929, #486, #970, #375, #964 from version 2…
….3.0 branch to version 3.0.0 branch

Conflicts:
	src/binding/defaultBindings/options.js
05241a0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 14, 2013
  1. @mbest
Showing with 7 additions and 1 deletion.
  1. +6 −0 spec/templatingBehaviors.js
  2. +1 −1 src/templating/templateRewriting.js
View
6 spec/templatingBehaviors.js
@@ -331,6 +331,12 @@ describe('Templating', function() {
expect(testNode.childNodes[0].value).toEqual("hello");
});
+ it('Should handle data-bind attributes with spaces around equals sign from inside templates and reference variables', function () {
+ ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "<input data-bind = 'value:message' />" }));
+ ko.renderTemplate("someTemplate", null, { templateRenderingVariablesInScope: { message: "hello"} }, testNode);
+ expect(testNode.childNodes[0].value).toEqual("hello");
+ });
+
it('Data binding syntax should be able to use $element in binding value', function() {
ko.setTemplateEngine(new dummyTemplateEngine({ someTemplate: "<div data-bind='text: $element.tagName'></div>" }));
ko.renderTemplate("someTemplate", null, null, testNode);
View
2 src/templating/templateRewriting.js
@@ -1,6 +1,6 @@
ko.templateRewriting = (function () {
- var memoizeDataBindingAttributeSyntaxRegex = /(<([a-z]+\d*)(?:\s+(?!data-bind=)[a-z0-9\-]+(?:=(?:\"[^\"]*\"|\'[^\']*\'))?)*\s+)data-bind=(["'])([\s\S]*?)\3/gi;
+ var memoizeDataBindingAttributeSyntaxRegex = /(<([a-z]+\d*)(?:\s+(?!data-bind\s*=\s*)[a-z0-9\-]+(?:=(?:\"[^\"]*\"|\'[^\']*\'))?)*\s+)data-bind\s*=\s*(["'])([\s\S]*?)\3/gi;
var memoizeVirtualContainerBindingSyntaxRegex = /<!--\s*ko\b\s*([\s\S]*?)\s*-->/g;
function validateDataBindValuesForRewriting(keyValueArray) {
Something went wrong with that request. Please try again.