Modify data from within the widget

krnkrn
edited July 2017 in Technical questions

I'm building an analytical dashboard and need to embed into separate widgets dynamically generated images. Optimally, I would like to display a <div> with an <img src="file_to_display">.

My question is: what is the cleanest and the most webix-conformant way to do this? I cannot use any flat data view (such as view: "template" etc.), as I need to feed it with a JS object which preserves methods etc. (and those seem to get lost when passed to the view: "template" & co. or when stored in the storage.local).

As for now, I didn't manage to display anything: the <div> isn't even generated. Yet, the template function (as the console.log's prove) produces a correct html. Maybe, then, I don't understand the role of the template property and it should be in this case coupled with the data property (frankly speaking, the exact way both interfere in the html creation isn't completely clear to me)?

// high-level view (prepares data, incl. ajax requests etc.)

let store = new webix.DataCollection({

  data: {session:ajax_request.session} //session object with methods etc.

});

$$("plot").data.sync(store);

// low-lewel view which is supposed to inherit from the high-level one

{
  view: "dataview",
  id: "plot",
  template: function(dataObj) { //read-in from the store
    let location = ... ; // some magic here
    return '<div><img src="' + location + '"></img></div>';
  }
}

Comments

  • In fact, I eventually understood that the problem is in the async calls that I was trying to get into the template. Obviously, it couldn't work.

    So now I'm trying to modify the data the template receives in the onBeforeRender property, but the template still receives the content of the DataCollection. Is it sync() call that block them from updating? What may I be doing wrong?

    Here's the modified version of the code:

    // high-level view (prepares data, incl. ajax requests etc.)
    
    let store = new webix.DataCollection({
    
      data: {session:ajax_request.session} //session object with methods etc.
    
    });
    
    $$("plot").data.sync(store);
    
    //low-lewel view which is supposed to inherit from the high-level one
    
    on: {
      onBeforeLoad: function(data) {
        //do something with data
      return newData;
      }
    }
    
    template: function(obj) {
      console.log(obj); // still returns the original data, instead of the newData
    }
    

    BTW: Would you consider designing a schema that would graphically represent the sequence of data loading, template applying etc. It would be very helpful, I think

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion