pr83 / ylc Goto Github PK

Hello (and thank you for your awesome work)!

I have a improvement suggestion, let define this scenario:
in controller : model.intList = [1,2,3,4]; model.anotherIntList = [1,2]
in html:
<... data-ylcLoop="int: intList" data-ylcBind="prop.checked: otherIntList.indexOf(int) != -1"
After an event that needs to remodel the html, intList changes to ["1", "2", "3", "4"], hence breaking the condition in the html and it always evaluates to false.

There are some ways to circumvent this problem, but it would be great if the library could just keep the original element's types.
If too difficult, why not supporting parseInt in the html attribute?

Thank you very much!

hello, thank you for your work.
I have a problem since the update of chrome (57.0.2987.133) , when i try update the content.udpate in $.get the result it's strange. if i refresh the page sometimes the update don't work
`

updateList : function(model, context) {
if(index == undefined){index = model.paged;}
elm = this;
arg = {};
$.ajaxSetup({ cache: false });
$.get('/api/' + module_name + '/_customers', arg, function (data)
{
json = JSON.parse(data);
if (json.statut && json.statut == 'ok')
{
list = json.res.list;
context.updateModel(function(model,context)
{
model.list = list; // bug sometimes in the vue -> not display in the vue but stored in model.list
console.log(model.list);
});
}
return json;
}).fail(function () {
console.log('error');
});
}

It's a simple json result {name:'xxxxx',id:1},{name:'xxxxx',id:2}, the result is return by $.get and
when i try with explorer or firefox the code work fine. One idea please ?

Hello!

This time it is not an issue but an idea of enhancement (note it would be great to add "enhancement" label to this "issue". I don't have write access so I can't do it myself).

Let say I want to use a jquery plugin called DataTable on:

<table data-ylcElementInit="initTable">
  ...
    <tr data-ylcLoop="row: rows">
      ...
    </tr>
</table>

with:

initTable: function(...) {
  $('table').DataTable(...);
}

So I will use the ylcElementInit attribute to init the table. That works well.

Now, let say I want to init the DataTable after an ajax call in the future. As initTable is inconditionally called after the init method of the controller, the <table> has been rewritten by the plugin and ylc has no handle anymore on it => initTable will never be called from now on and the loop for the <tr> has disappeared.

Workaround: if I know I will populate the table only once in the future, I will not use ylcElementInit, but something like:

ajax(url, function(response) {
  context.updateModel(function(model) {
    model.rows = response.rows;
    setTimeout(initTable, 1000); //ugly
  });
});

Proposal (for this case): add a new proto to updateModel, so we can do:

  context.updateModel(...).then(...); //like a promise

Better: internally make a template of the elements with the attribute ylcElementInit, and each time something in the children of the table has changed, recall the init element function.

What do you think?
Thank you for your time!

Hello!

I have this issue sometimes (if the ylcIf is working, and after reloading the page, it may not). The workaround is to generate an id based on the loop index and use jquery to show/hide when clicked.

version: 0.99.13, Chrome

Simplified Example: (I preserved the context)

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Content</th>
    </tr>
  </thead>
  <tbody>
    <tr data-ylcLoop="device: result">
      <td data-ylcBind="text <- device.name "></td>
      <td>
        <span data-ylcIf="device.expanded" data-ylcEvents="click: clickRow(device)">+</span>
        <table data-ylcIf="!device.expanded">
          <thead>
            <tr>
              <th><span data-ylcEvents="click: clickRow(device)">-</span>P1</th>
              <th>P2</th>
            </tr>
          </thead>
          <tbody>
            <tr data-ylcLoop="content: device.contents">
              <td data-ylcBind="text <- content.p1"></td>
              <td data-ylcBind="text <- content.p2"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

The clickRow(device) function is simply:

if (typeof device.expanded === 'undefined') { device.expanded = false; }
 device.expanded = !device.expanded;

Any ideas why it is not consistent?
My idea: sometimes the events are evaluated before the ylcIf (in that case it works), but sometimes the other way around (and then we are in the wrong state between the model and the view).

Thank you!

Hello,

It seems that the url http://any3w.com/ylc/index.html redirects to an insecure domain that makes me think it could be a tentative to steal my gitlab credentials.

Could you fix that? The documentation is no longer available.

Hi,

I'm trying to access the model from my controller from outside YellowCode.

I created a function in the controller like this :

var controller = {
	getQuestions: function(model,context){ return model.questions;},
	init: function(model){
		model.questions = [{titre:'je suis une question',type:'ouinon',choix:{'oui':'patate','non':'carotte'}},
				{titre:'je suis une question encore',type:'ouinon',choix:{'oui':'patate','non':'carotte'}}];
	},
	addElement: function(model, context){
		model.questions.push({titre:'',type:'',choix:{}});
	},
	deleteElement: function(model, context){
		model.questions.splice(context.loopStatuses.status.index,1)
	}
};
$(document).ready(function(){
	questions = $("#my").yellowCode(controller).yellowCode("getAdapter");
});

But when I access the model by using questions.getQuestions(), I get the initial status of the model and the inputs are resetted to their initial state in the view.

I tagged this as "Documentation" since I'm probably not doing it properly, and I think I won't be the only one needing this... Not revelant anymore

EDIT : I continued working on this. I found out that if I add a function in the controller that do a console.log(model), then triggers it before calling my getQuestions() function outside the controller, the model get updated. Seems that the 2-way data binding is not working as I though it would... I needed something that would update my model after I changed a value in the DOM...

EDIT #2 : I added a call to v2mProcessElement(my.domView); in the createAdapter() method. I don't know if it's the right thing to do, but it seems to works for what I need.

Hello!

I have encoutered some difficulties to make the evaluation of this expression work correctly when I test for null:

<span data-ylcLoop="port: ..." data-ylcEvents="click: ..." data-ylcBind="css.background: content.b==null ? 'antiquewhite' : 'white'">

This:

content.b==null

is always evaluated to false, even if content.b is null.

Any ideas?
Thank you!

When I run "041_elementInit.html" in the browser I got infinite console logs "InternalError: too much recursion".

Thank you for your great work!