I'm not really a Front end developer so I'm struggling a bit in adding some more advanced settings for my plugin.
I want to add this http://jsfiddle.net/rniemeyer/7RDc3/ to my plugins settings page. I know if I can get this example to work I will be able to modify it for what I need.
I have already configured my plugin using the assets and templates mixins and that works fine for passing a single setting back and forth from the plugin development guide in the docs.
In my templates/myplugin_settings.jinja2 I have this:
<div class='liveExample'>
<form>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<table data-bind='visible: gifts().length > 0'>
<thead>
<tr>
<th>Gift name</th>
<th>Price</th>
<th>Test</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><input class='required' data-bind='value: name, uniqueName: true' /></td>
<td><input class='required number' data-bind='value: price, uniqueName: true' /></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addGift'>Add Gift</button>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
</div>
In my static/js/events.js I have this:
$(function () {
function GiftModel(parameters) {
var self = this;
self.loginState = parameters[0]; // requested as first dependency below
self.settings = parameters[1]; // requested as second dependency below
self.someOtherViewModel = parameters[2]; // requested as first optional dependency below
// more of your view model's implementation
self.gifts = ko.observableArray([
{ name: "Tall Hat", price: "39.95" },
{ name: "Long Cloak", price: "120.00" }
]);
self.addGift = function () {
self.gifts.push({
name: "",
price: ""
});
};
self.removeGift = function (gift) {
self.gifts.remove(gift);
};
self.save = function (form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
};
};
// we don't explicitly declare a name property here
// our view model will be registered under "myCustomViewModel" (implicit
// name derived from constructor name) and "yourCustomViewModel" (explicitly
// provided as additional name)
OCTOPRINT_VIEWMODELS.push({
construct: GiftModel,
additionalNames: ["OctoPrintTwilioEvents", "gifts"],
dependencies: ["loginStateViewModel", "settingsViewModel"],
elements: ["liveExample"]
});
})
When I load the main page of the UI I get this in my web browsers console:
packed_core.js?556ae6e8:1002 Could not bind view model SettingsViewModel to target #settings_dialog : ReferenceError: Unable to process binding "text: function(){return gifts().length }"
Message: gifts is not defined
So I kinda get what this means? I think it's saying when the "SettingsViewModel" ran it tried to load my plugins template and that template references the gifts view model when hasn't been created yet?
It seems unlikely that we can't use a custom view model on our settings page? but idk. I don't know knockout and I'm hoping someone can help me get to a working position so I can modify it to fit my needs.
What I am trying to do was have a table with three columns. Column one would be an Event Name, two would be a boolean for taking a picture and three would be some text. That way a user could specify an event and take a picture and text it to themselves with a msg.
