maslosoft / binder Goto Github PK
View Code? Open in Web Editor NEWKnockout JS with Coffee and Sugar
Home Page: https://maslosoft.com/binder/
License: Other
Knockout JS with Coffee and Sugar
Home Page: https://maslosoft.com/binder/
License: Other
Add events to fancytree, ie:
fancytree: {data: app.model.Content.PageItemTree, on: {click: func, mousedown: func}}
Events should include:
Uncaught TypeError: Cannot create property 'model' on string '<div class="container-less">
<div class="row">
<div class="cell col-md-12">
H!
</div>
</div>
</div>'
at Track.Maslosoft.Ko.Track.Track.fromJs (application.min.js:14852)
Track.prototype.fromJs = function(model, jsData) {
var name, value, _results;
_results = [];
for (name in jsData) {
value = jsData[name];
if (typeof value === 'object') {
if (model[name]) {
_results.push(this.fromJs(model[name], value));
} else {
_results.push(model[name] = this.factory(value)); // HERE
}
} else {
_results.push(model[name] = value);
}
}
return _results;
};
This might be useful in one (more?) scenario:
Let's name event validate-all
validate-all
event be usedvalidate-all
This could have options, like:
event.data.showResults = {
success: false, // Don't show success validation
error: true // Show error validation
};
Solution with showResults
could be used to emphasize invalidated inputs, rather than all.
Cons: This could lead to massive validation calls on complex forms.
Maybe also could limit to some particular model or by callback etc.
The most important is to allow auto sizes, which should by default use properties:
autoXs
autoSm
autoMd
autoLg
And should add CSS classes like following:
col-xs
col-sm
col-md
col-lg
Add option to pass view model for tree selection via checkboxes. Proposed syntax:
<div data-bind="fancytree: {
data: app.model.Tree,
selected: app.model.MySelectedItems,
options: {checkbox: true}
}">
This should update selected
items when checkbox is cheched.
log
binding should simply console.log
any value passed.
This should also output element, to which it is attached.
When reloading data, especially on htmlValue, it is probably leaking mem, check if can be mitigated by using node disposal mechanism from ko.
Rename folder dev to docs
Make headers dependent if embedded, possibly detected by checking if defined('YII_DEBUG')
or other constant.
When embedded into page - display only header and docs - but also include models and customized CSS
When standalone display styles etc.
Need to rename all app.<fields>
to koBalin.<fields>
, and use in next point
Need to alter applyBindings to only act on part containing documentation
Currently even if nodes are same, the grid gets reloaded. It should update only when something was changed.
NOTE: Each change should trigger update, also on invisible column, as later some widgets might rely on it.
Ko punches offer syntax sugar to ko, intergrate it too.
https://mbest.github.io/knockout.punches/
Specially important part is Namespaced dynamic bindings, ie:
ko.bindingHandlers.data = {
getNamespacedHandler: function(binding) {
return {
update: function(element, valueAccessor) {
element.setAttribute('data-' + binding, ko.unwrap(valueAccessor()));
}
};
}
};
When using over relative displayed container, drop indicator might be below this container
There should be noinit
build target, so it could be manually initialized.
Files should have -noinit
suffix, ie:
ko.balin.min.js
ko.balin.js�
ko.balin-noinit.min.js
ko.balin-noinit.js
noinit
target should not contain _init.coffee
See #12 for details, still to implement:
Should incorporate sticky-kit.
Should automatically un-stuck by default on small screens. But this mustshould be configurable too.
Proposed syntax:
Most simple initialization:
<div data-bind="sticky: true"</div>
With options:
<div data-bind="sticky: {bottoming: true}"</div>
When modifying content from external tools, it must update view model too, possibly at the end of queue via setTimeout
with 0 value.
Test scanario:
Bundle build should contain all basic deps:
knockout
knockout-sortable
knockout-es5
ko-balin
This is meant to work with any validator, implementing "interface".
There is need to support multiple validators, ie:
RequiredValidator
UrlValidator
Proposed syntax:
<input ... data-bind="validator: {class: Maslosoft.Validators.Required, param1: true, param2: 'This is required'}"
For multiple validators it should be refined as array:
<input ... data-bind="validator: [{class: Maslosoft.Validators.Required, param1: true, param2: 'This is required'}, {class: Maslosoft.Validators.Required, param1: true, param2: 'This is required'}]"
After validation it should add (configurable) css class, ie error
to input/active element.
And add (configurable) css class to parent element, ie has-error
.
After sucessfull validation. there should be added success clases.
Validation must work for input
, textarea
, but also for contenteditable
fields.
Error messages:
There is open matter of where error messages should be added, possibly on There should be init
added predefined element (if not exists). This element could be defined like that:
div.error-messages
Should create use div with css class error-messages
(or .help-block
for bs compat), as in zen coding
Option 2:
Set observable variable with messages. Then it could be used anywhere.
This actually should be part of concrete validator implementation, not validator binding handler
Example:
<input ... data-bind="validator: {class: Maslosoft.Validators.Required, errors: observableArray, param1: true, param2: 'This is required'}"
This has implication, that when reordering dragged name is of last selected folder, not dragged one.
Reordering operation however works properly.
Maybe event should bubble up or something like that.
Currently dnd reorder saving need to be handled externally.
Dnd should update viewmodel.
Possibly some glitches might arise, as when updating view model tree will be re-evaluated, and node will be already rearanged.
Tree drag and drop must be simplified, with possibility to ovverride by options.
It should be as simple as:
<div data-bind="fancytree: {data: app.model.Tree.children, dnd: true, onDrop: action}" />
Where action should get node and parent node or somthing similar.
It might be the case when treegrid is not visible/evaluated.
Expanders.prototype.updateExpanders = function() {
var defer, one;
one = (function(_this) {
return function(item, data) {
var hasChildren;
hasChildren = data.children && data.children.length; // HERE error is raised
if (hasChildren) {
item.find('.no-expander').hide();
return item.find('.expander').show();
} else {
item.find('.expander').hide();
return item.find('.no-expander').show();
}
};
})(this);
This should allow:
validator: {class: someClass}
validator: {_class: OtherClass}
to be both valid
This should allow jumstart new validator by providing basic validator messaging implementaion.
Here's similar concept in php:
/**
* Custom error message. May contain special placeholders, ie: {attribute}, {value}
* which will be replaced with attribute label or value, depending on validator.
* @var string
*/
public $message = null;
private $messages = [];
public function addError($message, $params = [])
{
if (!empty($this->message))
{
$message = $this->message;
}
if (!empty($params))
{
$message = str_replace(array_keys($params), $params, $message);
}
$this->messages[] = $message;
}
public function getErrors()
{
return $this->messages;
}
See http://jsbin.com/zopod/1/edit?html,css,js,output for popover dynamic initialization.
Should have option to point to content id by selector.
data-bind="popover: title, content: someContent"
data-bind="popover: title, contentId: selector"
The proportions binding handler could set height of element, based on proportions to it's width.
Things to consider:
See Maslosoft/IlmatarWidgets#46
These might contain margins etc. which might alter apperance while should not
Current:
Expanding or collapsing node causes attached event to fire, ie. it causes selecting node and action call.
Expected:
Should only expand/collapse node.
To make it more responsive it should only set width
CSS style to pixel value and height to auto.
Additionally max-width
and max-height
to 100%
awesome-rating has already knockout binding built-in, should be easy to include.
See: https://github.com/bandraszyk/awesome-rating
btn btn-default
stylespadding: .2em 0.4em;
and margin: .1em;
form-control
border: none;
and box-shadow: none;
More on styling https://stackoverflow.com/a/21903469/5444623
And shown only when needed. This should prevent flickering. Maybe...
Uncaught TypeError: ko.expressionRewriting.writeValueToProperty is not a function
at m.Maslosoft.Binder.DatePicker.updateModel (application.min.js:239:17446)
at HTMLInputElement.o (application.min.js:243:275)
at HTMLInputElement.dispatch (application.min.js:8:39997)
at v.handle (application.min.js:8:37968)
updateModel @ application.min.js:239
o @ application.min.js:243
dispatch @ application.min.js:8
v.handle @ application.min.js:8
application.min.js:239 Uncaught TypeError: ko.expressionRewriting.writeValueToProperty is not a function
at m.Maslosoft.Binder.DatePicker.updateModel (application.min.js:239:17446)
at a (application.min.js:243:129)
at HTMLInputElement.<anonymous> (application.min.js:243:344)
at HTMLInputElement.dispatch (application.min.js:8:39997)
at v.handle (application.min.js:8:37968)
at Object.trigger (application.min.js:8:70063)
at HTMLInputElement.<anonymous> (application.min.js:8:70665)
at Function.each (application.min.js:8:3129)
at ce.fn.init.each (application.min.js:8:1594)
at ce.fn.init.trigger (application.min.js:8:70640)
There are several more binding handlers available in misc
folder.
These should be migrated into coffee classes.
As the fanscytree is no longer maintaned
Create model
binding, for example:
<img data-bind="model: app.model.Image, fields: [id, name, title]" />
Should create (line breaks for clarity, should be in one line):
<img data-model="{
id: '1231029438120498',
name: 'lots-of-bees.jpg',
title: 'Lots of bees!',
_class:'Maslosoft.Mangan.Model.Image
'}" />
Notice that _class
field should be added regardless of fields set.
Param fields
should be optional, defaulting to all model fields.
This could be used for wysiwyg links, images, videos to store extra data.
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.