javascript - Mithril - how to populate drop down list of view from API -


i'm trying populate drop down box rendered mithril's view methods being called outside of module (not sure if terminology correct, outside of property contains view, model , controller).

this chrome extension adds new field existing page , depending on user select, drop down box should refresh items pertaining selected item. can stage of getting new list of items, cannot drop down list redraw new objects.

the following shows module gets inserted inside existing page:

var itemslist = {   model: function () {   this.list = function (id) {      var d = m.deferred()      // calls chrome extension bg page retrieval of items.      chromeext.getitems(pid, function (items) {        // set default values when controller called.        if (items.length === 0) {          items = [            {name: 'none', value: 'none'}          ]        }        d.resolve(items || [])      })      return d.promise    }   },    controller: function () {     this.model = new itemslist.model()      this.index = m.prop(0)      this.onchange = function (e) {     console.info('ctrl:onchange', e.target)     }      // initialise drop down list array list.     this.dropdownitemslist = m.prop([]);      // sets default value of drop down list nothing calling function in model,      // until user selects item should populate drop down list values.     this.getitems = function(pid) {       this.model.list(pid).then(function (data) {       this.dropdownitemslist(data)         m.redraw()       }.bind(this))     }      this.getitems(0);   },    view: function (ctrl) {     var select_id = 'record_select'     return vm.type() ? m('div', [       m('.form__item', [         m('.label', [           m('label', {             htmlfor: select_id           }, 'id')         ]),         m('.field', [           m('select#' + select_id, {               onchange: ctrl.onchange.bind(ctrl)             },             ctrl.dropdownitemslist().map(function (it, i) {               return m('option', {                 value: it.value,                 checked: ctrl.model.index ===               }, it.name)             })           ),          ])       ]),     ]) : null   } } 

and mounted using m.mount("element name here", itemslist);

the code checks see if item has changed using mutation observer, , whenever detects changes field, call method new values. can see return value has new items.

i have tried various different methods on trying update drop down list, first trying set "this.list" new items list i've got, or trying create returnable method on controller can call when mutation observer fires.

after getting new items, how can make drop down list show new items has been retrieved?

i have read guides shows functions in controller or model being run - if they've been defined use them in view (i.e. have onclick method on view calls method) far cannot figure out how update or call methods outside of module.

is there way achieve above or different method should approach this?

after more research how mithril works, seems it's not possible call functions defined within component.

due this, have moved model outside of component (so has controller , view defined) , bound view use model outside of component.

now calling function updates model (which accessible elsewhere in code) , redrawing shows correct values need.


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

Cross-Compiling Linux Kernel for Raspberry Pi - ${CCPREFIX}gcc -v does not work -

java.lang.NoClassDefFoundError When Creating New Android Project -