Use the .css() function in jQuery, we can set one or more CSS properties for the set of matched elements.
Can $.css() do the same?

$("p").css("color","red");
$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

I am stuck on that, not sure how to change the src to the value of a variable.
Something like this $("#dummyimage").attr("src","http://dummyimage.com/250x155/");

The $.range() page mentions the following:

This function will be super useful when you're dealing with these kinds of for loop:

for (i in array) {
    ...
}

But the MDN explicitly notes that you should not do this:

Note: for...in should not be used to iterate over an Array where the index order is important.

Because the order of iteration is implementation-dependent, iterating over an array may not visit elements in a consistent order. Therefore it is better to use a for loop with a numeric index (or Array.prototype.forEach() or the for...of loop) when iterating over arrays where the order of access is important.
Array iteration and for...in

Just stumbled on this today and I can see the benefits of using a framework like this. Would really love to see more examples of how it might apply to real-world situations. Things like:

• Navigation
• Personalization
• Dynamic UI elements (favorites, ratings, etc)
• Other UI tricks like animations, effects, transitions, etc

Thanks for this, will be watching!

when i try to use $.scrollTop().

$.scrollTop()

23:29:45.660 VM838 display.js:331 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLBodyElement]' is not a valid selector.
    at DisplayJS.select (http://localhost:8000/node_modules/display.js/dist/display.js:331:52)
    at DisplayJS.s (http://localhost:8000/node_modules/display.js/dist/display.js:343:16)
    at DisplayJS.scrollTop (http://localhost:8000/node_modules/display.js/dist/display.js:393:14)
    at <anonymous>:1:3

Hacktoberfest is here, and DisplayJS is a perfect repo for it 😊.

It would be good to have a TodoMVC and dbmon implementation in DisplayJS to see how Displayjs plays and performs in an app.

https://codepen.io/guyjacks/pen/eRwadE

This is probably more of a javascript issue than an issue with DJS, but I can't figure out how to prevent an infinite loop from occurring when I update the variable that I'm watching.

I don't see the difference between my example and the dog example in the docs.

I love this little framework... Cheers!

Displayjs is awesome. But it doesn't seem to play nice with jQuery. Especially jQuery GET and POST.

It would be good for developers to see in the README which browsers are supported.

Made a local try to work from scratch and have such issue

and nothing changed...

I don't know hou to descripe in English...

使用dog初始化，然后使用 $.var(true) 进行绑定。
但是当我修改dog中的变量的值的时候，视图并没有立即刷新，当我第二次修改才会刷新。

Translate by Google:

Use dog to initialize, and then use $ .var (true) for binding. But when I modify the value of the variable in dog, the view does not immediately refresh, when my second change will refresh.

Maybe the gif can let you know what i said.

Here is the code:

<p>My dog's name is <span var="name"></span></p>
<p>It is <span var="age"></span> years old now!</p>

&

var dog = {
    name: 'doge',
    age: 12
}
var $ = new DisplayJS(dog)
$.var(!0)

i hope you can understand what i mean.

can displayJS do

$( "#b" ).load( "article.html #target" );

load target on id/class?

Tell me please what I do not correctly (use example3)?

<script>
var $ = new DisplayJS( window );

var obj = {};
obj.set = function( )
{
    var list = $.range(5);
    var average = $.average( list );
    var median = $.median( list );
   ....
    $.var( );
};

obj.set( );
</script>

Or it is necessary to use?:

let data = {
  list: '',
  average: '',
  median: ''
}

const $ = new DisplayJS( data );

But how uses displayJS in classes and many objects?

First of all I would like to say thanks for this awesome framework 👏. I've found typos in landing page and fixed them. I'll open a pr for fix these typos.

It would be good if elements were read out by a call of $ .on(), $ .html() and others.
As now it very much spoils a code.

$.html($.s(".todo-list"), localStorage.getItem("todos"));
$.all($.s(".toggle"), function(el) {});

Is it possible to call a function every time a target variable changes??

It's not important,but is adjascent a wrong word in $.after() & $.before()?

when i try to use $.var(true) , it crashed.

var $ = new DisplayJS(window)
$.var(true)

Uncaught TypeError: Cannot redefine property: chrome
    at Function.defineProperty (<anonymous>)
    at Object.watch (display.js:759)
    at Object.watchAll (display.js:778)
    at DisplayJS.live (display.js:782)
    at DisplayJS._var (display.js:47)

When using an adblocker extension in Chrome (Adblock plus in my case) seems to break the display.js.org site.
Seems to be from the video that is embedded and the code served from google to do with ads on the video.

Hi,

How to repeat in a array with Objects and display certain properties out of the object? This is where Im working in to test with DisplayJS https://codepen.io/xjoeyv/pen/EbMvOJ

In the The Core language page, there is a code example:

// create DisplayJS instance
var $ = new DisplayJS(window)

var lines = [
	"First line",
	"Second line",
	"Third line"
]
var text = $.select(".text")

for (let i in lines) {
	$.append(text, lines.indexOf(i) + " " + i + "<br>")
}

What is the intention with using lines.indexOf(i)? It always returns -1, as the index is never in the list of lines. Maybe it wanted to be lines[i]?

I think it would be more convenient to carry out some functionality in "plugins".
For example to "Math".
It concerns both "src", and a "dist" directories.

I just copied example of To-Do list from .repeate() documentation and it doesn't work.

Hi,

it seems like it's not possible to check checkboxes or radio buttons with DisplayJS based on a variable, like in the following example:
https://jsfiddle.net/jgb0qc38/

Is there another way to do this?
This might be related to #37 - the checked attribute, I guess.

$.empty() can't empty the content which I insert by $.after() & $.before()
html
<div class="testEl">I'll have before and after HTML when DisplayJS will do its work</div>
js
$.after($.select(".testEl"), "<h1>Hello, I'm the after HTML</h1>"); $.empty($.select(".testEl"))

Hello

Unless I'm missing something, the given examples are too light for me to understand what a real app would look like.
Do you have any example of application created with DisplayJS?

Pascal

Hi!
did you try to solve the https://github.com/tastejs/todomvc challenge using solely displayjs ?

test.html:

<p class="status">Loading</p>
<div class="load"></div>

js:

const $ = new DisplayJS(window)
$.load('.load', './_load.html', function(){
  $.html('.status', 'Loaded')
})

_load.html:

<div class="load">
    <h3>Load Success!!!!</h3>
    <p>Here is from load.html!!!!!</p>
</div>

but test.html will not load the _load.html

Why so?

i wanted to use $.s() function to select DOM node

but report errors: Uncaught RangeError: Maximum call stack size exceeded

so i checked your display.es6.js source code found that there is a question in "isElement()"function and "select()" function.

so i deleted the "el = this.s(el);" in "isElement()" function and it works!

Could you check the source code?

Dude,
you have a great idea for binding state between the UI and Controller. You should strip down your api to it's core driving principal of just that, binding state. You have packaged up alot of non-sense bloat that developers dont need or care about. There is .load(), .live(), .custom(), .ajax().....and on and on.

Truth is, this is an awesome idea for an api, not a framework.

I mean something like this:

<a var:href="url"></a>

so that the url variable gets assigned to the href attribute.

I was just trying to create the simplest possible test, and couldn't get it work :/
https://jsfiddle.net/a6ysdxzo/

Any idea why I'm just getting "undefined"?

Not work (p show - '00'):

<p var="time"></p>

var data = { time: '00' };
var $ = new DisplayJS( data );

 $.dynamic( function( )
{
    const time = new Date();
    data.time = time.getHours();
} );

 $.var( true );

Work (p show - current time) :

<p var="time"></p>

var data = { time: '00' };
var $ = new DisplayJS( data );

 $.dynamic( function( )
{
    const time = new Date();
    data.time = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
} );

 $.var( true );

Do you plan to add a few concise laconic
Additions - cycles, conditions choose, routes?

Hi, cool library

I am trying to use the repeat function with an array that I get from a request, I would like to update this array every 500ms

But calling repeat again will further extend all items inside the block. So one option is to set innerHtml to "" but this will clear the template as well and brick repeat.... am I missing something here ? or is this not possible yet ?