knockout/knockout

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

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

Jaxcoder

@codenamejason

@theDPlayer <span data-bind="value: upward">... so on. In your view model set the values to ko.observables like self.upwared = ko.observable()

LMAO, just realizing how old this is LOL

Emilian Ionascu

@emilianionascu

Anyone else still using KO in production?

Mark Carpenter Jr

@mcarpenterjr

Yea, I have a couple apps that depend on it.

Silviu Bogan

@silviubogan

Hello! Is there any way to use KO with ES6 import syntax or should I start using KO 4? Thank you.

Nelson Amador

@rod6214

Hello there!!!!, is KO still alive?

myunuskabir

@myunuskabir

Hi Experts..I am a newbie to KO..The tutorials say that a ViewModel Object is passed to ko.applyBindings. However, in some code instances I see the function value itself passed. Can someone please explain?

For example: function DashboardViewModelTest() {
//properties
return DashboardViewModelTest;
}

Brett Ryan

@brettryan

@theDPlayer for your template you could achieve it like this.

<div data-bind="with: citem">
  <div data-bind="class: currency">
    <span data-bind="text: upward"></span>
    <span data-bind="text: size"></span>
    <!-- ko text: currency --><!-- /ko -->
  </div>
</div>

then in your model if you had the following:

self.citem = ko.mapping.fromJS({
  currency: 'AUD',
  upward: 'Upward',
  size: 200
});

pim

@pimbrouwers

Anyone else still using KO in production?

I stopped a few years ago when my company was on a mission to reduce bundle size. We use mithril now for all greenfield work. But I miss knockout immensely.

Where communities thrive

People

Repo info

Activity

if