Considering using KnockoutJS or other data binding framework

[Michael Powell]

Hello,

I've got a list of items that I want my users to be able to add to and rearrange. I've got the basic UI working at the moment with some (okay, MUCH) creative use of jQuery, selectors, etc. But now I want to consider a data binding, or even MVC, framework for purposes of binding to an underlying list. So instead of engaging the UI directly, engagement would occur via the underlying data, to either populate a table in the first place, or to rearrange rows in the table. I do not mean rearrange in the sense that rows should be sorted, but rather to be able to swap rows, moving rows up, down, first, last, etc. Then when the user is ready to accept the changes, click OK, or Save, or Finished, or something like that, and all I need to do is examine the underlying data without needing to extract the table data.

Is something like this possible with a KnockoutJS? AngularJS seems like overkill for this application, plus there are routing implications with NG that I do not need, as the host environment will be ASP.NET MVC.

Thanks...

Regards,

Michael Powell

[Michael Powell]

On Saturday, April 30, 2016 at 10:23:11 AM UTC-4, Michael Powell wrote:

Hello,

I've got a list of items that I want my users to be able to add to and rearrange. I've got the basic UI working at the moment with some (okay, MUCH) creative use of jQuery, selectors, etc. But now I want to consider a data binding, or even MVC, framework for purposes of binding to an underlying list. So instead of engaging the UI directly, engagement would occur via the underlying data, to either populate a table in the first place, or to rearrange rows in the table. I do not mean rearrange in the sense that rows should be sorted, but rather to be able to swap rows, moving rows up, down, first, last, etc. Then when the user is ready to accept the changes, click OK, or Save, or Finished, or something like that, and all I need to do is examine the underlying data without needing to extract the table data.

To summarize my rambling description in a couple of bullet items:

* observable list of underlying data. i.e. [{...},{...},{...},{...},...]

* will add, remove or swap items in the list

After that, will run with the data and pass it along into my ASP.NET MVC.

Is something like this possible with a KnockoutJS? AngularJS seems like overkill for this application, plus there are routing implications with NG that I do not need, as the host environment will be ASP.NET MVC.

Thanks...

Thank you... 

 

Regards,

Michael Powell

[Brian Adams]

There are several ways to go about this but here is what I would do: https://jsfiddle.net/3fmrtrLw/1/

It uses RubaXa/Sortable and its knockout binding.

[Brian Adams]

Another way without the extra viewmodel https://jsfiddle.net/3fmrtrLw/3/