CollectionBinder & dynamic elAttribute

[boussou]

Hi, I tried to use a CollectionBinder from an existing handlebars template: It seems you cannot do something like this:

   <td><a class="btn" data-name="edit" href="#/students_edit/{{id}}">Edit</a> {{id_student}} </td> 

namely, putting an id (coming from the collection model) inside the text of the url.

I tried through a converter for an elAttribute, but looking at the code it seems I would have to change code of CollectionBinder. converter code:

{ boundAttribute: '[data-name]', 
   id:  {selector: '[data-name=edit]',  elAttribute: 'href',converter: function(direction, value){return 'color:' + value} }
 };

Could someone please confirm it is not possible this way with the current code? any better idea? (examples doen't help)

[theironcook]

@boussou

If your model's id was: "123" and you wanted the tag's href to look like this: href="#/students_edit/{{id}}"

you'd create the binding to look like this

{ id: {selector: '[data-name=edit]', elAttribute: 'href', converter: function(dir, val){return "#/students_edit' + val;}}}

You just need to include the #/students_edit/ part in the return value from the converter.

Thanks. You absolutely right (I just made a cut&paste mistake).

The problem is: the data is coming from a collection fetch, and val is always empty, tough it loops for the correct number of rows,

Looking at the Backbone.CollectionBinder.ElManagerFactory.createEl method in Backbone.CollectionBinder.js, it seems it won't work.

My point is: maybe I do it the wrong way and there is a simpler way with modelbinder?

Here is the full sample code (missing is the server data) http://jsbin.com/lisufixujo/edit?html,output

json data look like this: { status: "1", count: "775", rows: [ { id_student: "103", firstname: "Greg", name: "ARZ", email: "greg.arz@gmail.com" }, { id_student: "104", idStudent: "104", firstname: "Aldeen", name: "BER", email: "aldeen_berl@gmail.com" }, etc

[boussou]

By answering you, I found the problem ;-)

in var bindings I must specify "id_student:" no "id:" ;-)

now the next problem is that I have to specify all the bindings for an item, since Backbone.ModelBinder.createDefaultBindings() is not called in my case (Backbone.CollectionBinder.js line 211).

Changing line 215 to allow "extending" the output createDefaultBindings() would be perfect.

Besides, I think that we should add a sample code like I provided, displaying a grid with row edit.

Thanks

[boussou]

in extension I have to write

    var bindings =  {
 boundAttribute: '[data-name]', 

   firstname:'[data-name="firstname"]',
    name:'[data-name="name"]',
    email:'[data-name="email"]',
    id_student: {selector: '[data-name=edit]',  elAttribute: 'href',converter: 
     function(direction, value){return  '#/students_edit/' + value;} }
    };

not just:

    var bindings =  {
 boundAttribute: '[data-name]', 
id_student: {selector: '[data-name=edit]',  elAttribute: 'href',...
    };

for a template like this:

       <tr>
          <td data-name="firstname"></td>
          <td data-name="name"></td>
          <td data-name="email"></td>
          <td><a class="btn" data-name="edit" href="#/students_edit/{{id}}">Edit</a>  </td>          
        </tr>
``

[amakhrov]

I assume this issue is resolved and can be closed?

[boussou]

I suppose so. Would you add a sample code for a "select * " grid display for the newcomers?