Could not bind viewmodel to target

Hi, sorry for bothering, I cant figure out why these errors happen, been trying to figure it out for over two days with no luck and I really don't understand what's happening:

Could not bind view model SettingsViewModel to target #settings_dialog : ReferenceError: Unable to process binding "click: function(){return testSensor() }"
Message: testSensor is not defined
Could not bind view model filamentsensorsimplifiedViewModel to target #settings_plugin_filamentsensorsimplified : Error: You cannot apply bindings multiple times to the same element.

Here is my jinja template:

<h3>{{ _('Filament Sensor Simplified') }}</h3>
<form class="form-horizontal marginTop">
    <div class="control-group">
        <div class="marginBot">
            <b>Which Raspberry Pi pin your sensor output is attached to (-1 disables the plugin)</b>
        </div>
        <label class="control-label">{{ _('Board pin number:') }}</label>
        <div class="controls" data-toggle="tooltip">
            <input id="pinInput" type="number" step="any" min="0" class="input-mini text-right"
                   data-bind="value: settings.plugins.filamentsensorsimplified.pin">
        </div>
    </div>
    <div class="control-group">
        <div class="marginBot">
            <b>Input terminal of the sensor (switch) needs to be connected to ground or 3.3 V</b>
        </div>
        <label class="control-label">{{ _('Sensor is connected to:') }}</label>
        <div class="controls" data-toggle="tooltip"
             title="{{ _('Specify how the sensor (switch) is connected. One end of the sensor must be wired to ground or 3.3 V. Sensor is triggered when open.') }}">
            <select id="powerInput" class="select-mini" data-bind="value: settings.plugins.filamentsensorsimplified.switch">
                <option value=0>{{ _('Ground') }}</option>
                <option value=1>{{ _('3.3V') }}</option>
            </select>
        </div>
	<div>
            <table style="margin-left: 180px; margin-top: 20px">
                <tr>
                    <td>
                        <input type="button" class="btn" data-bind="click: testSensor()" value="Test sensor">
                    </td>
                    <td style="padding-left: 10px">
                        <p id="sensor-test-result-text" data-bind="value: testSensorResult" style="display: inline;"></p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="alert-info wy-alert-warning marginTop">
            <span class="icon-info-sign"/>
            <span class="octoFontFamily iconIndent">Sensor is triggered when open.</span>
        </div>
        <div class="alert-danger">
            <span class="icon-warning-sign"/>
            <span class="octoFontFamily iconIndent">Warning! Never connect the sensor to 5V! 5V could destroy GPIO of your Raspberry Pi.</span>
        </div>
        <div style="font-size: 11px">
            For more information click <a
                href="https://github.com/LuckyX182/Filament_sensor_simplified">here</a>
        </div>
    </div>
</form>

and here is my javascript file:

$(function() {
    function filamentsensorsimplifiedViewModel(parameters) {
        var self = this;
        self.settingsViewModel = parameters[0];
	self.testSensorResult = ko.observable(null);

		self.onDataUpdaterPluginMessage = function(plugin, data) {
            if (plugin !== "filamentsensorsimplified") {
				console.log('Ignoring '+plugin);
                return;
            }

            new PNotify({
                title: 'Filament sensor simplified',
                text: data.msg,
                type: data.type,
                hide: data.autoClose
                });

		}

	self.testSensor = function() {
            $.ajax({
                url: "/api/plugin/filamentsensorsimplified",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({"command": "testSensor", "pin": $("#pinInput").val(), "power": $("#powerInput").val()}),
                success: function (result) {
                    if (result.triggered === true) {
                        $("#sensor-test-result-text" ).css( "color", "green" );
                        self.testSensorResult("OK! Sensor detected filament.");
                    } else {
                        $("#sensor-test-result-text" ).css( "color", "red" );
                        self.testSensorResult("Fail! Sensor triggered (open).")
                    }
                }

            });
        }

    }

    // This is how our plugin registers itself with the application, by adding some configuration
    // information to the global variable OCTOPRINT_VIEWMODELS
    ADDITIONAL_VIEWMODELS.push([
        // This is the constructor to call for instantiating the plugin
        filamentsensorsimplifiedViewModel,

        // This is a list of dependencies to inject into the plugin, the order which you request
        // here is the order in which the dependencies will be injected into your view model upon
        // instantiation via the parameters argument
        ["settingsViewModel"],

        // Finally, this is the list of selectors for all elements we want this view model to be bound to.
        ["#settings_plugin_filamentsensorsimplified"]
    ]);
});

What am I doing wrong? Any help is greatly appreciated...

You probably need to update your init py file for the get_template_configs and set custom_bindings to True for your settings view model.

You may also be able to bind your click event to settings.plugins.filamentsensorsimplified.testSensor, but I'm not sure about that one 100%.

1 Like

Thanks jneilliii for your answer but setting custom_bindings doesn't cut it. Any suggestions?

Is your whole code on github somewhere? It's a little easier to diagnose/disect if you have a full view of the plugin, not just parts and pieces.

Yes, here: https://github.com/LuckyX182/Filament_sensor_simplified/tree/test_button
Mind you the errors might not be the same as I described above.

I just submitted a PR to your repo. That is working for me to load without errors. I can't say if it fixed anything though.

Thanks! That seems to have fixed it. I don't know why it did not work for me at first. You are an absolute legend for helping me and helping others on this forum.

Glad to help man.