knockout/knockout

Knockout makes it easier to create rich, responsive UIs with JavaScript

Micah Zoltu

@MicahZoltu

:thumbsup:

Unfortunately, punches anywhere other than attributes results in invalid HTML, so I get page errors on initial load. This greatly limits the utility of punches for me. :/

I can use them for text and inside data-bind, but I can't use things like the for loop or if statements.

Casey Webb

@caseyWebb

Errors, or just the ugly handlebars?

Micah Zoltu

@MicahZoltu

Errors.

Casey Webb

@caseyWebb

Can you share one? I'm not sure why that would happen instead of just rendering them like text

Micah Zoltu

@MicahZoltu

Let me see if I can reproduce.

Casey Webb

@caseyWebb

We avoid the FOUC with an overlay that is removed after applyBindings; also how we show our browser support/JS-required warning on page load

Micah Zoltu

@MicahZoltu

Oh, you know what... I bet this is actually a punches error.

{{ if property }}
{{ /if }}

Casey Webb

@caseyWebb

if

oops

Micah Zoltu

@MicahZoltu

I assumed since there was an ifnot that there was similarly an if, but maybe not?

Casey Webb

@caseyWebb

#if

Micah Zoltu

@MicahZoltu

Example in docs:

<!-- Without a colon -->
{{#ifnot items().length}}
    <div>There are no items.</div>
{{/ifnot}}

Ah, I see the # now. :P

Casey Webb

@caseyWebb

yea, colons are optional, closing tag can be anything as long as it starts with a slash

{{/ko}} works the same as {{/ifnot}}. kinda funky, but as long as you're aware can help save you from some head-bashing bugs.

Micah Zoltu

@MicahZoltu

New error:

SyntaxError: private fields are not currently supported

However, the field is public readonly myAccount = ko.pureComputed(() => { ... })

Casey Webb

@caseyWebb

sounds like a transpilation problem

what is your ts target set to?

Micah Zoltu

@MicahZoltu

Compiled to this.myAccount = ko.pureComputed(() => { ... })

Target ES2019, module ES2015.

Casey Webb

@caseyWebb

I'd try target es2015 just to rule it out, but that should work afaict

Micah Zoltu

@MicahZoltu

It compiles down to a property set in the constructor to a field on the class.

And the same thing works in a KO if block.

<!-- ko if: myAccount -->

changed to

{{#if myAccount}}

Otherwise code untouched.

Casey Webb

@caseyWebb

that's curious, as punches just rewrites the binding and passes it on to KO. maybe double check closing tags? I'm kind of at a loss, just throwing things out there

Micah Zoltu

@MicahZoltu

{{/if}}

Casey Webb

@caseyWebb

I meant unterminated blocks within the if binding. I've seen some funky errors thrown when that happens.

Micah Zoltu

@MicahZoltu

Just checked diff, the change from KO comment to Punches curlies were the only changes, and each was a single line.

Just reverted that one change and problem went away.

Casey Webb

@caseyWebb

:/ yea I'm not sure what is happening

theDPlayer

@theDPlayer

hi,

getting this error in knockout.js

Uncaught Error: ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node
    at a.uc (vendor.js:21782)
    at Object.a.applyBindings (vendor.js:21847)
    at portfolio.js:35

following this: https://knockoutjs.com/documentation/foreach-binding.html

Andrew Vickers

@avickers

@theDPlayer You’re the second person to report this error in the past few days while following a tutorial. When I test it out in Codepen, it works for me. What version of Knockout are you using, and where are you getting it from?

@caseyWebb Hope the tornado didn’t affect you

Andrew Vickers

@avickers

Oh, and what bundler are you using with what configuration? The fact the the error is being thrown by vendor.js makes it seem like a Webpack/Babel issue

My suggestion is to create your ViewModels as regular Objects rather than Functions that you instantiate, as something in the transpilation appears to be causing that to go sideways. If you can confirm that, then it might be a good idea to update the documentation.

Casey Webb

@caseyWebb

@theDPlayer use ko.applyBindings(myViewModel, document.body)

the second parameter is no longer optional iirc

@avickers all well, thanks for the sentiment :smile:

theDPlayer

@theDPlayer

@caseyWebb , thanks. @avickers latest version.

theDPlayer

@theDPlayer

how do you bind something like this in this.

<div class="currency"><span>upwared </span><span>size</span>currency</div>

in this, upward, size and currency is dynamic text, and no, they are not nested

Andrew Vickers

@avickers

@theDPlayer https://codesandbox.io/s/knockout-sandbox-d6k2t

Where communities thrive

People

Repo info

Activity

if