Example for Options settings binding with Knockout

Development
1

Hi

Are there any good examples/existing plugins that demonstrate creating a list of items that are available as the options in a drop-down select field in the plugin settings?

I'm trying to use https://knockoutjs.com/documentation/options-binding.html, but I guess I'm just not creating my list of options in the right place because I keep getting a reference error. Would be good to see how this can be done properly so I can get used to using manipulating a list of items like this across the js view and in python.

Thanks!

2

It would be helpful to see your code in context, but here's an example that I added to the DetailedProgress plugin...

3

I think where to put it and how to reference that location in general is what I'm confused with.

I need a static mapping of sensors:

supportedSensors= {
    "Plantower PMS5003": "5003",
    "Plantower PMS7003": "7003",
    "Plantower PMSA003": "A003"
}

I think the right place for something like this is in my main plugin class, but not as a setting because this is never changed by the user, and then I need to reference it in my settings view so that the dropdown shows the keys, and the value from the dict is stored as the settings value. I'm struggling to connect these dots.

I feel like there's something about injecting dependencies in OCTOPRINT_VIEWMODELS to make this accessible, but maybe not, as it's not a view model. I could put the dict in my SensorsManager class, but I can't see the follow up steps to get it working from there.

4

I have another option for that as well, where there is a hard coded observable array in the js file. But to be honest, if it's hard coded, just hard code in the HTML instead, no reason to add the overhead of an observable in that case. Just in case, here are the examples.

Definition iin js file...

How it's used in select...