jsviews | Interactive data-driven views | Model View Controller library

The difference in the behavior is because early versions listened to the change or keydown events on s for triggering observable changes to the data. Subsequently the HTML5 input event became available, and was the preferred event for responding to any change in the value. Later versions of JsViews use the input event.

Calling $('#title').val('Hello').change(); will raise a change event, but will not raise the input event.

You can instead raise the input event directly, by using:

JsRender/JsViews {{for}} and {{props}} tags have built-in support for sorting, filtering etc, but don't have a built-in groupBy feature. But you can fairly easily create one, following similar techniques to the grid with ~total() sample.

Here is an approach using helper functions:

There is nothing wrong with your example. Did you try it? You are allow to access nested properties.

Please read the documention: https://www.jsviews.com/#paths

It depends if you are running the link() method of JsViews, or simply the render() method of JsRender.

Your first version will works in both cases, but is simply rendering the CSS style. The second version would only be used if you are running the link() method of JsViews - for data-binding etc. (So the background image could be dynamically updated if you data-binding triggers a new value).

For the data-link version, you need to makes sure the helper is returning a string that is not just "someUrl", but "url(someUrl)" - to provide the correct CSS data url syntax. In that case, the following should work:

The sorting does refresh when there is an array change event. Putting sort='name' will re-sort if you click on [Add], or on [x] to delete an item. But what you want it is to trigger a re-sort whenever you change the name property in an item.

But you don't want it to re-sort on character entry, so the first thing is to set:

Event - change is working correctly. First, updated DOM next update observable object. Event change happens at the moment the DOM changes (before update observable object) therefore the object is immutable.

Take away value from {on 'change' ~updateValue } then the dom event itself will disappear into the function.

You can turn to the conclusion like this:

We use JsViews for our project. We rejected angular and react because we required something slim that would not intervene with our existing asp.net webforms application. Perhaps you've heard "it's the Angular way or the highway". JsViews does this perfectly fine. Vue would probably also have worked for this application.

You'll likely be able to do all you want with any of the frameworks so that's probably a tie.

As for support and bugfixes: JsViews is second to none. We have ran into a couple of issues. All have been fixed in a day or so. The creator is very passionate about this framework. Honestly I think it's easier to get fixes from a smaller framework.

There is going to be more code out there for the big frameworks foresure but I personally don't consider that a big problem. We use bootstrap for our project so most stuff is just writing the correct markup. Where we need to generate said markup dynamically and/or need scripts we encapsulate that stuff in a reusable tag (think component). It means writing some code yourself yes but in my experience reusing someone elses components often leads me to lack features or looks and I'll often spend more time trying to configure that component than it would have taken me to write a custom component myself.

Documentation for JsViews is very complete. Lots of examples too. Vue also has pretty complete documentation and good community support.

I use Vue as well for an other project and it's pretty similar to JsViews in terms of features but I still think JsViews is more powerful once you get to know it and I like JsViews templates more than Vue templates. Also in Vue I feel I have to "configure" my viewmodels more to suit Vue wheras in JsViews I just hand it my viewmodels. In particular I really like the concept of helper methods and converters to separate the view from the model. Basically JsViews feel like a subset of WPF which I personally like.

I feel the basic concept of JsViews is very easy to learn: data bindings, converters, helpers, etc.. Custom tags is somewhat more complicated but not overly so.

If I had to choose a popular framework I would have picked Vue but personally I feel JsViews is more powerful. In case it makes you feel any better my bet is that all these frameworks will be superseded by something else so you might not want to focus blindly on popularity :)

For security reasons, index.html should not contain code anymore (except the bootstrap script). This is somewhat new, therefore you will find a lot of tutorials which place something like a Shell-Container or, as in your example, a Page directly to the html body.

In your main view, you have to use the mandatory function "createContent" from which you have to return what should be rendered. Here is the basic implementation of a JS View:

Well you can define your own getUniqueId() which gets the last generated id, along the lines of