arguiot / displayjs Goto Github PK
View Code? Open in Web Editor NEWA simple JavaScript framework for building ambitious UIs [DEPRECATED]
Home Page: https://display.js.org
License: MIT License
A simple JavaScript framework for building ambitious UIs [DEPRECATED]
Home Page: https://display.js.org
License: MIT License
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?
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,
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.
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"?
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!
It would be good for developers to see in the README which browsers are supported.
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 ?
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.
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.
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 just copied example of To-Do list from .repeate() documentation and it doesn't work.
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
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at new component (display.js:541)
at DisplayJS.component (display.js:550)
at
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 );
It would be good to have a TodoMVC and dbmon implementation in DisplayJS to see how Displayjs plays and performs in an app.
can displayJS do
$( "#b" ).load( "article.html #target" );
load target on id/class?
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.
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"))
Hi!
did you try to solve the https://github.com/tastejs/todomvc challenge using solely displayjs ?
Hacktoberfest is here, and DisplayJS is a perfect repo for it 😊.
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 indog
, 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.
Displayjs is awesome. But it doesn't seem to play nice with jQuery. Especially jQuery GET and POST.
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]
?
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)
Is it possible to call a function every time a target variable changes??
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:
Thanks for this, will be watching!
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?
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 anArray
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 (orArray.prototype.forEach()
or thefor...of
loop) when iterating over arrays where the order of access is important.
Array iteration and for...in
Do you plan to add a few concise laconic
Additions - cycles, conditions choose, routes?
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/");
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
I mean something like this:
<a var:href="url"></a>
so that the url
variable gets assigned to the href
attribute.
It's not important,but is adjascent a wrong word in
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
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) {});
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.