These are chat archives for mithriljs/mithril.js

17th
Apr 2016
Ralph
@ralphbecket
Apr 17 2016 00:26
@cazacugmihai You may want to take a look at my own virtual-DOM effort, Od (https://github.com/ralphbecket/Web/tree/master/Od) which was inspired by Knockout and Mithril. Od's vDOM structure is much the same as all the others, except for 'components' which are vDOM-valued observables. When the underlying observable updates, a component re-evalutates its vDOM function, and that is used to patch the corresponding subtree of the real DOM. Components are entirely independent: sub-components are neither re-evaluated nor re-patched, and an updating sub-component has no effect on any parent component.
Od is very close to a version 1.0 release; I just have to finish off life-cycle hooks for people that want to use things like jQuery or Velocity.
Other than that, taking a leaf out of Mithril's book, it comes with a router, promises, XHR support, and observables, all of which are independent of the vDOM library -- you can pick and choose what you wish to use.
dc
@dcsan
Apr 17 2016 01:10
@isiahmeadows do you usually keep typings in your github repo?
i was trying to keep them out, just like node_modules
but not sure what is the equivalent to a package.json
so a new dev can just run typings install
Chad Furman
@chadfurman
Apr 17 2016 07:12
Hey, I want to do an autocomplete with mithril and I'm wondering if something like this exists already?
Evgeniy Labutin
@LabEG
Apr 17 2016 07:15
@dcsan do you like autoconnect typings without typings install? just from imports m from 'mithril'
@chadfurman yep, i did it, now this feature in PR, and need accept him
Chad Furman
@chadfurman
Apr 17 2016 07:19
PR to core?
That doesn't seem right... is there a components repo?
Evgeniy Labutin
@LabEG
Apr 17 2016 07:20
@dcsan @chadfurman lhorie/mithril.js#1012 please vote for this
@chadfurman to core ES6 imports only, autocomplete based on typings and typings autoconnect
Evgeniy Labutin
@LabEG
Apr 17 2016 07:28
@chadfurman I'm confused, i think about IDE autocomplete =D
Mihai Cazacu
@cazacugmihai
Apr 17 2016 08:42
@ralphbecket: I'll take a look, thank you!
Isiah Meadows
@isiahmeadows
Apr 17 2016 17:24
@dcsan Currently, @LabEG and I are working that out. I haven't had the time to devote to Mithril as much lately, or that PR would probably already have already been merged by now.
@chadfurman To clarify, @LabEG is referring to #1012, which makes the Mithril typings work with TypeScript's resolver.
Mithril already has a definition file that has been used for a while. It just needs updated.
Isiah Meadows
@isiahmeadows
Apr 17 2016 17:30
And if you use the ambient file, you shouldn't have much of a problem, as the autocomplete is all TypeScript, and the definition file only provides a description to the compiler. It shouldn't break a thing once that PR gets merged.
:smile:
Chad Furman
@chadfurman
Apr 17 2016 17:41
ohh
I was thinking something else :)
spacejack
@spacejack
Apr 17 2016 17:45
heh, I think @chadfurman is looking for a way to do autocomplete input widgets in a mithril view
aucelum
@aucelum
Apr 17 2016 19:31
@chadfurman Not sure if there's one about autocomplete widgets specifically, but take a look at: https://github.com/lhorie/mithril.js/wiki/Components
aucelum
@aucelum
Apr 17 2016 19:39
Re: autocomplete in IDE - I annotated Mithril with JSDoc (for the Closure Compiler, not IDEs) and VSCode, incidentally, picked types just fine, but was not as accurate as the typings experience
Chad Furman
@chadfurman
Apr 17 2016 21:33
I can drop in chosen if I want to
For now I'm just using a mutli select input box
Anyways, I'm having trouble with onclick...
    `m('div.btn.btn-primary', {onclick: ctrl.search}, 'Search')`
better yet...
I'm not seeing any network requests nor any console messages
Chad Furman
@chadfurman
Apr 17 2016 21:40
nevermind.
herpderp
I had an error in my code and itwasn't compiling my console logs.
Well that's pleasant.
okay so now I'm getting something I don't understand again :)
My controller is the same as the above gist
you can see this.page = m.prop(1);
in the search method, I've changed all references of this to controller
Chad Furman
@chadfurman
Apr 17 2016 21:45
and I'm getting controller.page() is not a function, though the view echos out the ctrl and it clearly says page is a function
hmm... printing the controller out in the search method reveals that it is just "function() ...." as opposed to an actual object
Chad Furman
@chadfurman
Apr 17 2016 21:51
hmmm the ole var that = this in the parent scope let me get around that
Chad Furman
@chadfurman
Apr 17 2016 22:08
okay now my network request is returning data, but it's not showing on the view
    jobModel.search(options).then(function(results) {
      ctrl.jobs.length = 0;
      ctrl.jobs.concat(results());
      m.redraw.strategy('diff');
      console.log(ctrl.jobs);
    });
I tried ctrl.jobs = jobModel.search() -- but then I'm left with ctrl.jobs.map() is not a function
aucelum
@aucelum
Apr 17 2016 22:11

@chadfurman this might help? https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind You can "fix" the context this is referring to from the caller this way (e.g. a view's "onclick" handler - onclick: ctrl.search.bind(ctrl))

On the other hand, a number of people here would suggest not employing "this" in your controller constructor, and instead make it return an object with the members you want to use from your view. Function#bind would be unnecessary that way

Chad Furman
@chadfurman
Apr 17 2016 22:11
oh oh oh I got it!
I was doing this.jobs = [] in my controller
changing it to this.jobs = m.prop([]) then using ctrl.jobs().map in the view let me use ctrl.jobs = jobModel.search(options) and the unwrapping works
Andrea Coiutti
@ACXgit
Apr 17 2016 23:03
OT: how to check the browser compatibility of this to allow a fallback? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator
Chad Furman
@chadfurman
Apr 17 2016 23:06
How can I dynamically add and remove classes from elements?
something like ng-class in angular? Do I use the className property with a getter/setter?
aucelum
@aucelum
Apr 17 2016 23:10
@chadfurman Per mithril docs, most straightforward way
//use this idiom
m("li", {class: selected ? "active" : ""})
Chad Furman
@chadfurman
Apr 17 2016 23:11
And what changes the value of selected? Where do you see that in the docs? G etting started?
Leo Horie
@lhorie
Apr 17 2016 23:12
you can change on a click for example, m("li", {class: selected ? "active" : "", onclick: function() {selected = !selected}})
Chad Furman
@chadfurman
Apr 17 2016 23:13
Thanks!
Chad Furman
@chadfurman
Apr 17 2016 23:18
        m('div.description',
          {
            class: expandedDescriptions[index] ? 'expanded' : '',
            onclick: function() {
              expandedDescriptions[index] = true;
              console.log('test', expandedDescriptions);
            }
          },
          m.trust(job.description()),
          [
            m('div.feather-bottom')
          ]
        ),
The console.log shows that expandedDescriptions0 === true
But the div doesn't have the class?
oh, hmm, the view gets re-rendered doesn't it
So i'm unsetting it.
yeah that's it
Thanks :)