Binding button in setting to a function?

Nils · January 14, 2022, 8:11am

Hi,

I try to bind a function to a button like other plugins does in its settings. But I get an error that binding failed: Could not bind view model SettingsViewModel to target #settings_dialog

The interesting thing is if I changed the binding to e.g. click: settings.plugins.SlicerEstimator.BlaBla there is no error any more although the function does not exists. But sit in front of it for hours...

What I missed and why is there not error binding to a function not exists?

Error

Charlie_Powell · January 14, 2022, 8:48am

For that, you will need to use custom bindings, so you will have to bind a viewmodel, with a dependency on the settingsViewModel and update every binding to reference that rather than the internal settings. It's a bit complicated to type out for me now but if that doesn't make sense I can write a better explanation later.

Nils · January 14, 2022, 5:04pm

Hi hate JavaScript...it works now with a setting I think I tried before...

I moved the function to the ViewModel as my variables and it runs... that was the setup I started with...

github.com

NilsRo/OctoPrint-SlicerEstimator/blob/a8354568abd9f814c4d1b2cab5d0b5538ba81b5f/octoprint_SlicerEstimator/static/js/SlicerEstimator.js#L114

    
      
          
          

          
//--- Additional Metadata current print
          
          
// self.metadata_list = [];
          
          
// self.onBeforeBinding = function () {
          //   self.settingsViewModel.metadata_list = self.settingsViewModel.settings.plugins.SlicerEstimator.metadata_list.extend({ rateLimit: 50});
          // };
          
          
self.settingsViewModel.addNewMeta = function() {
            alert("Bla");
            // var meta = {
            //     id: ko.observable('').extend({ stripQuotes: true}),
            //     desc: ko.observable('').extend({ stripQuotes: true}),
            //     enabled: ko.observable(true),          
            // };
            // // self._subscribeToDictValues(meta, 'metadata', self.onIconChange);
            // self.settingsViewModel.settings.plugins.SlicerEstimator.metadata_list.push(meta);
          };

But why can e.g. themify create the function in the custom ViewModel which does not work in my case. Compared themify function should be created in self.setting.addNewIcon...

github.com

Birkbjo/OctoPrint-Themeify/blob/a07164c232cdeded5087d54840a2d37655df330d/octoprint_themeify/static/js/themeify.js#L121

    
      
              var ruleObj = {
                  selector: ko.observable('').extend({ stripQuotes: true}),
                  rule: ko.observable('').extend({ stripQuotes: true}),
                  value: ko.observable(''),
                  enabled: ko.observable(true),
              };
              self._subscribeToDictValues(ruleObj, 'customRules');
              self.ownSettings.customRules.push(ruleObj);
          };
          
          
self.addNewIcon = function() {
              var icon = {
                  domId: ko.observable('').extend({ stripQuotes: true}),
                  enabled: ko.observable(true),
                  faIcon: ko.observable(''),
              };
              self._subscribeToDictValues(icon, 'tabs', self.onIconChange);
              self.tabIcons.tabs.push(icon);
          };
          
          
self.onBeforeBinding = function() {

Charlie_Powell · January 14, 2022, 5:59pm

That's what I mentioned with the 'Custom Bindings' settings.

In your template configuration somewhere (in Python) you have set custom_bindings=False. What this means is that there will be no special bindings for your plugins templates of your viewmodel.

custom_bindings=True, the default, will mean that the settingsViewModel is not bound to your plugin's templates. Instead, whatever viewmodel you bind to the element (with the target field I think, in the JS) will become the 'root'. From there you will have to change all your existing bindings from the ones that work as if they are in the settings viewmodel to being settingsViewModel.... at the start instead, as your viewmodel depends on it.

jneilliii · January 14, 2022, 6:32pm

the other option is doing like you did and you're actually attaching your function to the settingsViewModel, which in turn allows the binding to work with custom_bindings=False because the function is now part of settings...it's all about scope.

Charlie_Powell · January 14, 2022, 6:52pm

I would generally recommend against doing that though - it has high potential to conflict with other plugins or core OctoPrint at some point, it is more resilient to do it in your own viewmodel.

jneilliii · January 14, 2022, 8:27pm

Couldn't you use self.settings = parameters[0].settings and then not have to rewrite the previous bindings?

Nils · January 15, 2022, 7:44am

So switch custom binding on as I can use the scope of my own ViewModel that there could not be a conflict?

jneilliii · January 16, 2022, 5:26am

That would be correct. I still wonder if you could use self.settings = parameters[0].settings with custom_bindings=True and not have to refactor all your current bindings. Otherwise it's a fairly easy find/replace.