some help on upgrading to 1.0.0

[jmecosta]

@David-Desmaisons hi

i now tried upgrading my application to new version, and i can no longer update the ui from the c# side. one of the things ive updated was i think related with vue 2.0 (https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function) and also window.glueHelper.setOption({ mixins: [localMixin] });

my debug log does not show anything relevant:

The thread 0x6b10 has exited with code 0 (0x0).
Neutronium - Browser Log: Message: Neutronium: ViewModel injected, source: , line number: 11183, page: file:///C:/prod/buildallextension/BuildDrop/vs17/packagemanager.html

const localMixin = {
    props: {
    },
    data: function () {
        return {
            Packages: [{ Name: "ABC", Version: "1.0.0", Invalid: false }, { Name: "ABC.redist", Version: "1.0.0", Invalid: false }],
            gridColumns: ['Name', 'Version', 'Invalid'],
            InvalidReason: "another reason",
            Versions: ["1.0"],
            searchQuery: ""
        }
    },
    methods: {
    },
    watch: {
    }
};


window.glueHelper.setOption({ mixins: [localMixin] });

Maybe unrelated issue, and likely caused by my laptop computer resolutioon but i can get rendering properly done. It was also in previous version. Also the example show similar issue. Have you come accross this:

thanks

[jmecosta]

the rendering issue is related to high dpi of my screen, it was set to 200% after set to 100% then it displays correctly. However i cant use the screen anymore without getting a headheack. maybe its possible to configure neutronium to support hidpi? cefsharp/CefSharp#1803

[David-Desmaisons]

Hello @jmecosta , could you open a dedicated issue for dpi support please?

Regarding the migration I assume that you read the migration guide.

i can no longer update the ui from the c# side.

Do you mean that the data first show-up correctly but are not updated when you change the property value and send an INotifyPropertyChanged event?
If this the case I just add this point to the migration guide:

• Updates on the ViewModel should now happen on the UI thread, since Neutronium is not redirecting them anymore.
  
  Practically, this means that you should ensure that any INotifyPropertyChanged events and ObservableCollection updates occurs on the UI threads:
  you can use WPF Dispatcher Invoke or BeginInvoke methods.
  
  Neutronium ALWAYS will call ViewModel on the UI thread either when updating properties value or executing command.

Check if this will not solve your problem,

[jmecosta]

@David-Desmaisons ive read the upgrade guide, the parts that were relevant to my case :) and then i got a exception regarding the wpf dispatcher. And most of my code was already calling the dispatch method.

im not so sure about that data is actually read for the viewmodel when it starts since it that case it would display nothing. And its displaying the dummy data i have by default in the javascript file. i will attach my code in a bit

[jmecosta]

pckmanager.zip

the relevatn files are packagemanager.html and js/package-manager.js

[David-Desmaisons]

Could you open the Vue devtool and check the App data?

[jmecosta]

@David-Desmaisons thanks i think its related with section ViewModel binding

my app was not done from template, but its not knockout either. So i have the viewmodel set to the object as the documentation says but i dont know how to readjust the binding to point to new object.

should be quite simple :)

[David-Desmaisons]

@jmecosta , you are correct: now you have this addicional ViewModel property. You should rewrite your binding taking in consideration this addicional property.

[David-Desmaisons]

Hello @jmecosta any news on this? Thanks.

[jmecosta]

@David-Desmaisons i dont understand how to connect data still :( commands are fired propertly from javascript, but that is easy to understnad by just calling ViewModel.Command. But for example for a grid data:

    <div class="col-8">
      <demo-grid  :data="Packages"
                :columns="gridColumns"
                :filter-key="searchQuery">
      </demo-grid>
    </div>

were i have in mixin:

data: function () {
    return {
        Packages: [{ Name: "ABC", Version: "1.0.0", Invalid: false }, { Name: "ABC.redist", Version: "1.0.0", Invalid: false }],
        gridColumns: ['Name', 'Version', 'Invalid'],
        InvalidReason: "another reason",
        Versions: ["1.0"],
        searchQuery: ""
    }
},

How do i connect this to viewmodel? ive tried :data="ViewModel.Packages" but that did not work either

[David-Desmaisons]

In fact, with our mixin, after injection of C# properties, application data looks like:

├── ViewModel
├── Packages
├── gridColumns
├── InvalidReason
├── Versions
└── searchQuery

I guess you want something like that:

└── ViewModel
    ├── Packages
    ├── gridColumns
    ├── InvalidReason
    ├── Versions
    └── searchQuery

You can handle this in different ways:

1. try:

data: function () {
    return { 
        ViewModel:{
            Packages: [{ Name: "ABC", Version: "1.0.0", Invalid: false }, { Name: "ABC.redist", Version: "1.0.0", Invalid: false }],
            gridColumns: ['Name', 'Version', 'Invalid'],
            InvalidReason: "another reason",
            Versions: ["1.0"],
            searchQuery: ""
        }
    }
},

2. Send the same data from C# side

3. Adjust your binding to reflect the change in the object properties

Either way should work

[jmecosta]

all good, thanks for the help.

        ViewModel:{
            Packages: [{ Name: "ABC", Version: "1.0.0", Invalid: false }, { Name: "ABC.redist", Version: "1.0.0", Invalid: false }],
            gridColumns: ['Name', 'Version', 'Invalid'],
            InvalidReason: "another reason",
            Versions: ["1.0"],
            searchQuery: ""
        }

was what i was missing.