knockout/knockout

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

Andrew Vickers

@avickers

yeah, looks like the example code you found was pretty incomplete!

Salvodif

@Salvodif_gitlab

no this is what I wrote and I didn't check it :-\

I saw the typo

Andrew Vickers

@avickers

ok, I think you might also need to do

self.coordinates(data.rectx() + ‘ - ‘ + data.recty());

Salvodif

@Salvodif_gitlab

yep, then I need to have text into those rect

but thank u so much @avickers

I need to working into the click events

Andrew Vickers

@avickers

no problem

Mark Carpenter Jr

@mcarpenterjr

Anyone work with Fontawesome SVG's and data binding? Had an original setup that wworked fine with i elements but is now broken with the SVG sprites.

Element is bound as follows;

<svg class="svg-inline--fa fa-square fa-w-14 fa-lg" data-bind="css: {
                                    'fa-square': i_response() != 'NA',
                                    'fa-check-square': i_response() == 'NA'
                                  }" aria-hidden="true" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"></path></svg>

The orignal looked like this;

<!-- <i class="far fa-square fa-lg" data-bind="css: {
                                    'fa-square': i_response() != 'NO',
                                    'fa-check-square': i_response() == 'NO'
                                  }"></i> -->

FA5 drops a class on the html element to signal it's don converting i's to svg's and I watch for this before binding.

Simple wait loop;

function loadBindings() {
  if ($('html').hasClass('fontawesome-i2svg-complete')) {
    ko.applyBindings(cl_window_data = new model());
    cl_window.getChecklistData(window.inc_data ? window.inc_data : JSON.parse(localStorage.check_list));
    console.warn('Set "testing" to true to output MySql to the dev2 server.', 'testing =', testing);
  }
  else {
    setTimeout(loadBindings, 250);
  }
}
loadBindings();

Andrew Vickers

@avickers

sort of, but I was more interested in minimizing imports

// Pass a Font Awesome object
export function fa(i) {
  return `
  <svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${i.icon[0]} ${i.icon[1]}" style="pointer-events:none;">
   <path d="${i.icon[4]}" />
  </svg>
  `
}

import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'

then pass whatever particular variable

Andrew Vickers

@avickers

I guess that’s not much help, sorry. I’ve actually rewritten knockout so that it automatically processes template literlals and data-binds :/

Mark Carpenter Jr

@mcarpenterjr

It's cool, thanks though.

Mark Carpenter Jr

@mcarpenterjr

Is there any way to "inspect" a binding? It's clear that the binding works, otherwise the initial icon state would be a slow burn question mark, instead of an empty square. The associated click event works. and the underlying data model updates, just not the class on the svg.

Andrew Vickers

@avickers

It’s probably because Knockout is built using the className API instead of the classList API and the className api isn’t the same for svgs as the other html elements. This probably needs to be filed as an issue.

It would actually need to be element.className.baseVal, so I guess you could write a custom binding that targets either that or the classList api

Andrew Vickers

@avickers

    function toggleDomNodeCssClass(node, classNames, shouldHaveClass) {
        var addOrRemoveFn;
        if (classNames) {
            if (typeof node.classList === 'object') {
                addOrRemoveFn = node.classList[shouldHaveClass ? 'add' : 'remove'];
                ko.utils.arrayForEach(classNames.match(cssClassNameRegex), function(className) {
                    addOrRemoveFn.call(node.classList, className);
                });
            } else if (typeof node.className['baseVal'] === 'string') {
                // SVG tag .classNames is an SVGAnimatedString instance
                toggleObjectClassPropertyString(node.className, 'baseVal', classNames, shouldHaveClass);
            } else {
                // node.className ought to be a string.
                toggleObjectClassPropertyString(node, 'className', classNames, shouldHaveClass);
            }
        }
    }

What version of KO are you using? It should be accounting for SVGs

Mark Carpenter Jr

@mcarpenterjr

HMMMMMMM, 2.7.17? Doesn't sound right to me thought it was at least 3. I'm going to have to dig into this.

Weird, folder it is in says, 2.7.17, but the version cited in the comment at the top is 3.4.1

I'm up to 3.5.0

Andrew Vickers

@avickers

Have you tried using FA5’s dom.watch()?

You should be able to use KO to set the class on the <i> elements and it uses a mutation observer to create the svg elements automatically

https://fontawesome.com/how-to-use/with-the-api/methods/dom-watch

Mark Carpenter Jr

@mcarpenterjr

So I looked into that, wouldn't work because the binding isn't updating the class on the icon. I just swapped out FA5 js for css. Working good now.

recharge-dreams

@recharge-dreams

Hi there!

Could any one please let me know if we can use knockout component in stenciljs?

Marvin Rounce

@marvc1

Hi everyone,

Anyone noticed that ko.applyBindings(viewModel) no longer works....?

It no requires a second argument of the DOM node

This is in version 3.5

Marvin Rounce

@marvc1

No worries, it's not knockout, it's the knockout-validation library - Knockout-Contrib/Knockout-Validation#663

spooky

@spooky

hi all

can anyone tell me how/if I should dispose a subscription created inside of a custom extender?

the example extender logChange given here: https://knockoutjs.com/documentation/extenders.html doesn't really do anything with the subscription and I'm not sure if it's not there so that it doesn't complicate the example or it's simply not needed

Nelson Amador

@rod6214

It's necessary to update .md file in the github, because it misses some steps to do a correctly installation. :)

Bennie Swart

@bennieswart

Hi all. I've run into a situation where I have a computed that depends on two observables, and I need to change both observables "at the same time", otherwise the value of the computed is invalid for a moment. Something like this:

let l1 = { a: 1, b: 2, c: 3 };
let l2 = { d: 4, e: 5, f: 6 };
let key = ko.observable('a');
let lookup = ko.observable(l1);
ko.computed(() => console.log(lookup()[key()]));

// Use a different key and a different lookup:
key('d');
lookup(l2);
// Output: 1<newline>undefined<newline>4

// Is something like this possible?
ko.atomicMutation(() => {
    key('d');
    lookup(l2);
});
// Output: 1<newline>4

Before I delve into the realm of workarounds, are there any reasons why something like this isn't theoretically possible?

I could easily patch this functionality into the existing ko code, but what would be the implications for non-trivial cases?

Casey Webb

@caseyWebb

@bennieswart set ko.options.deferUpdates = true

you can also do it only on the observables you need, but I recommend using it globally.

https://knockoutjs.com/documentation/deferred-updates.html

also, use pureComputed instead of computed whenever possible. it will not be evaluated until/unless needed.

Bennie Swart

@bennieswart

@caseyWebb very interesting. We have quite a large existing codebase so such a move would definitely be considered high risk. Additionally, this makes notifications async and I'm quite interested in having something that achieves the same goal, but strictly sync.

Casey Webb

@caseyWebb

@bennieswart in that case, I would see if it's possible to refactor key and lookup to a single observable.

e.g.

ko.observable({ key: 'd', lookup: l2 })

Bennie Swart

@bennieswart

That might work in this minimal example, but in the actual codebase it is not an option. Back to the question - conceptually, would something like ko.atomicMutation be possible? If not, why?

Andrew Vickers

@avickers

You should be able to indirectly accomplish this already.
Use an observableArray as a tuple [key, lookup].
Update the underlying array and not the observable array, and then call valueHasMutated

This will update the observableArray and you can use index[0] and index[1] to accomplish what you need

Where communities thrive

People

Repo info

Activity