Wizard data-bind not working

Development
1

Tried everything I can think of to make data-bind work on the wizard. Works just fine for me in the settings page.

2

Can't say that I do this much but is this one of those times when you need to toggle custom_bindings in __init__.py under get_template_configs()?

http://docs.octoprint.org/en/master/plugins/mixins.html?highlight=custom_bindings#octoprint.plugin.TemplatePlugin.get_template_configs

custom_bindings A boolean value indicating whether the default view model should be bound to the component (false) or if a custom binding will be used by the plugin (true, default).
data_bind Additional knockout data bindings to apply to the component, can be used to add further behaviour to the container based on internal state if necessary.

I see this from here but I couldn't tell you if this is the right way to throw variables at your jinja2:

    def get_template_configs(self):
        return [
            dict(type="settings", name="Firmware Update",
                 data_bind="visible: loginState.isAdmin()"),
        ]
3

I'm not sure if it's required but my wizard template binds to settings. There is a reference in the js file loaded that tells the plugin the elements to bind to. See here. Then I have a reference to the settings view model from the plugin's js file here and reference it in the wizard via that other reference here.

I hope that makes sense, and may not be the best approach. I always struggle with the knockout viewmodel binding and typically end up messing with it the most until it eventually works right.

You'll notice I also don't set the get_template_configs function in __init__.py at all, as long as you match the proper naming convention for your ninja files.

4

@OutsourcedGuru I've tried custom bindings, non custom bindings, every combination you can think of. I still cant seem to get the data-binds to work on the wizard.

@jneilliii You shouldn't have to define any JS at all for a basic template/settings data-bind according to the documentation. I would really prefer not to have to include a JS file, just to work around a bug for something that isn't working correctly. I'd prefer to wait until it works properly before implementing the wizard in the plugin itself. Unless you are doing something fancy with your custom settingsViewModel, I don't see why you wouldn't just use the default existing settingsViewModel with settings.plugins.plugin_identifier.setting or settings.settings.plugins.plugin_identifier.setting, the documentation is not clear here, but settings.plugins.plugin_identifier.setting seems to work just fine with no JS on the settings template for me. This is, of course, assuming I am not grossly misunderstanding the documentation.

@foosel any ideas here? (even after fixing the typo on delete_after_upload was fixed, no dice)

5

Your probably right, like I said I always struggle with the binding. I wonder if it's because the wizardViewModel is not directly bound to the settingsViewModel so you have to use something like settingsViewModel.settings.plugins.plugin_identifier.setting or like you mentioned settings.settings.plugins.plugin_identifier.settings. I assume you've tried both of those. I'm sure @foosel will shed some light on the matter.

6

I did notice that both your wizard and settings view models were sharing the same id for inputs, which Chrome complained about a bit, might want to fix that either way.

7

I have almost the same problem,
the following knockout-bind works inside a navbar template, but not inside a tab template:

<a href="#" data-bind="attr: {href: settings.settings.plugins.printitdisplay.url}">Hello World!</a>

Here's my get_template_configs:

    def get_template_configs(self):
        self._logger.info("getting templates...")
        return [
            dict(type="navbar", template="printitdisplay_navbar.jinja2", custom_bindings=False),
            dict(type="tab", name="Printit", template="printitdisplay_tab.jinja2", custom_bindings=False),
            dict(type="settings", custom_bindings=False)
        ]

Does someone know what could be the reason for this?

8

@aurror Check the knockout - init-binding in your JavaScript. See:

OCTOPRINT_VIEWMODELS.push(
...
        elements: [
            document.getElementById("navbar_..."),
            document.getElementById("tabsomething_...")
        ]
...
1 Like
9

Thanks, it works now that i got my own javascript file.
I tried using the default one before, that didn't work.