Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 22 15:01
    brianmhunt commented #2019
  • Aug 15 04:31
    aersamkull closed #2019
  • Aug 15 04:31
    aersamkull commented #2019
  • Aug 14 21:28
    fastfasterfastest commented #2492
  • Aug 14 17:52
    yippibrian commented #2019
  • Aug 14 15:25
    bilal-infotrack commented #720
  • Aug 14 15:00
    VladyslavBiletskyi opened #2492
  • Jul 31 20:14
    mbest commented #2106
  • Jul 31 19:04
    Dmitri-Sintsov commented #2106
  • Jul 31 18:53
    ryios commented #2106
  • Jul 31 18:53
    ryios commented #2106
  • Jul 31 18:51
    ryios commented #2106
  • Jul 31 18:50
    ryios commented #2106
  • Jul 31 18:49
    ryios commented #2106
  • Jul 31 18:47
    ryios commented #2106
  • Jul 31 18:47
    ryios commented #2106
  • Jul 25 20:53
    avickers commented #2490
  • Jul 25 16:22
    mbest commented #2106
  • Jul 25 16:14
    NetLancer commented #2106
  • Jul 25 09:55
    navkirat commented #2106
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
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