StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Quote from <a href="http://knockoutjs.com/documentation/computedObservables.html" rel="nofollow">knockout computed observable documentation</a></p> <blockquote> <p>... it doesn’t make sense to include cycles in your dependency chains.</p> </blockquote> <p>The basic functionality I interpreted from the post:</p> <ul> <li>Based on a field selection, display a list of properties/options</li> <li>Have the ability to edit said property/option</li> <li>Have the ability to add property/option</li> <li>Have the ability to delete property/option</li> <li>Have the ability to sort properties/options (its there, you have to click on the end/edge of the text field)</li> <li>Have the ability to save changes</li> </ul> <p>As such, I have provided a skeleton example of the functionality, except the last one, you described @<a href="http://jsfiddle.net/6AZgd/4/" rel="nofollow">JSfiddle</a> The ability to apply the changes to the database can be addressed in several ways; None of which, unless you are willing to sacrifice the connection overhead, should include a computed or subscription on any changing data. By formatting the data (all of which I assumed could be collected in one service call) into a nice nested observable view model and passing the appropriate observables around, you can exclude the need for any <code>ko.computed</code>.</p> <p><strong>JS</strong>:</p> <pre><code> var viewModel = { availableFields : ko.observableArray([ ko.observable({fieldId: 'Field1', properties: ko.observableArray([{propertyName: "Property 1.1"}])}), ko.observable({fieldId: 'Field2', properties: ko.observableArray([{propertyName:"Property 2.1"}, {propertyName:"Property 2.2"}])})]), selectedField: ko.observable(), addProperty: function() { var propertyCount = this.selectedField().properties().length; this.selectedField().properties.push({propertyName: "Property " + propertyCount}) }, }; ko.applyBindings(viewModel); $("#field-properties-list").sortable({ update: function (event, ui) { //jquery sort doesnt affect underlying array so we have to do it manually var children = ui.item.parent().children(); var propertiesOrderChanges = []; for (var i = 0; i < children.length; ++i) { var child = children[i]; var item = ko.dataFor(child); propertiesOrderChanges.push(item) } viewModel.selectedField().properties(propertiesOrderChanges); } }); </code></pre> <p><strong>HTML</strong>:</p> <pre><code><span>Select a field</span> <select data-bind='foreach: availableFields, value: selectedField'> <option data-bind='text: $data.fieldId, value: $data'></option> </select> <div style="padding: 10px"> <label data-bind='text: "Properties for " + selectedField().fieldId'></label> <button data-bind='click: $root.addProperty'>Add</button> <ul id='field-properties-list' data-bind='foreach: selectedField().properties'> <li style = "list-style: none;"> <button data-bind="click: function() { $root.selectedField().properties.remove($data) }">Delete</button> <input data-bind="value: $data.propertyName"></input> </li> </ul> </div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload