Acess to foreach binding

83 views
Skip to first unread message

asds

unread,
Feb 12, 2018, 1:54:25 AM2/12/18
to KnockoutJS
HI together,


I have the following foreach binding with a html table. (see HTML: and JavaScript)


I want to fill the table without ajax
so I replace following code :

  self.chosenFolderId.subscribe(function(id) {
          $.get('/mail', { folder: id }, ...); // update chosenFolderData
       });



with: 

   test = [{from:Test1, to:Test2}, {from:Test3, to:Test4}];
     
self.chosenFolderData(tes
t);
       
});


I tried to fill the table. But its not possible. How can I do that?? And when i filled all data how can i access to a certain row to change the value??






HTML:

<table class="mails">
    <thead>
    <tr>    
    <th>
    <select data-bind="options: folders, value: chosenFolderId"></select>

    </th>
    <th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="with: chosenFolderData">
       <!-- ko foreach: mails -->
        <tr>
            <td data-bind="text: from"></td>
            <td data-bind="text: to"></td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: date"></td>
        </tr>
       <!-- /ko -->    
    </tbody>
</table>



JAVASCRIPT:
function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();

    // Behaviours  
   // Subscribe to chosenFolderId and fetch new data when it changes  
    self.chosenFolderId.subscribe(function(id) {
          $.get('/mail', { folder: id }, ...); // update chosenFolderData
       });

    // Show inbox by default, and kickoff initial fetch  
    self.chosenFolderId('Inbox');
};

ko.applyBindings(new WebmailViewModel());







Andrew Vickers

unread,
Feb 12, 2018, 5:08:37 PM2/12/18
to KnockoutJS
It sounds like you might not need  to use the with binding at all.

The reason it is not working is because it is looking for an array called "mails" within the chosenFolderData binding context.  If chosenFolderData is the array containing the emails, then you can do away with the with binding altogether:
    <tbody data-bind="foreach: chosenFolderData">
        <tr>
            <td data-bind="text: from"></td>
            <td data-bind="text: to"></td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: date"></td>
        </tr>

You can mutate the underlying array with any of the ordinary methods that work on arrays.  KO provides a few convenience functions.  There are also some projects out there that are more efficient at updating arrays, if the arrays you are using will become quite large.  I believe that these will be incorporated by default into KO 4.0, so unless you experience performance issues I would just wait.

If what you are asking is how to get which specific item (index within the array) that a user has clicked on, you will want to log the full event triggered by the click binding.  It will include both the html element and context within the view model.

asds

unread,
Feb 13, 2018, 6:02:51 AM2/13/18
to KnockoutJS
Thanks for the answer.
Can you give me an Code-Example :  how can i access to a certain row to change the value??

For Example. I created a table with 5 Rows. Now new data are arrived. So i want to change the VALUE from  "text: from" and "text:subject" on Row 3 and 5.
Reply all
Reply to author
Forward
0 new messages