more then one foreach data-binds

[asds]

Following situation:

I work on the Learn Example Single Page Applications. I want to have a <select> at the first column of the table to select the folders.

In HTML you see I have to foreach data bindings in a with data-bind. So the problem is, I cant access independent to the single foreach data bindings. (folders or mails) .

How can I realize that?

HTML:

<!-- Folders -->


<!-- Mails grid -->
<table class="mails" data-bind="with: chosenFolderData">
    <thead>
    <tr>    
    <th>
    <select data-bind="foreach: folders">
    <option data-bind="text: $data,
                   css: { selected: $data == $root.chosenFolderId() },
                   click: $root.goToFolder"></option>
    </select>
    </th>
    <th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="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>    
    </tbody>
</table>

JAVASCRIPT:

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

    // Behaviours    
    self.goToFolder = function(folder) {
        self.chosenFolderId(folder);
        $.get('/mail', { folder: folder }, self.chosenFolderData);
    };

    // Show inbox by default
   
    self.chosenFolderData({folders:['Inbox', 'Archive', 'Sent', 'Spam']});
};

ko.applyBindings(new WebmailViewModel());

[Gunnar Liljas]

I still don’t quite understand. Could you describe a step-by-step scenario?

/g

---

From: 'asds' via KnockoutJS <knock...@googlegroups.com>
Sent: Wednesday, January 31, 2018 12:15:18 PM
To: KnockoutJS
Subject: [KnockoutJS] more then one foreach data-binds

 

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[asds]

I have a <select> element inside in the <th> </th> tag. The Select Element have a foreach databind. 

But it doesn't  work to select a folder and show it in the table. I think a problem is, that I have a with binding with two foreach bindings ( in the select and tbody tag) 

I access the foreach in select  with

self.chosenFolderData({folders:['Inbox', 'Archive', 'Sent', 'Spam']});

and the foreach in  tbody with :

 $.get('/mail', { folder: folder }, self.chosenFolderData);

But this doesn't work

[Sindre]

You dont data-bind a select with foreach.

Try this:

<select data-bind="options: folders, selectedOption: choosenFolderData"></select>

You can read more about it in the knockout documentation: http://knockoutjs.com/documentation/selectedOptions-binding.html

[Sindre]

One more thing: when you are inside a with binding of an object, you need to specify that the selectedOption observable is not within the "with object":

<select data-bind="options: folders, selectedOption: $parent.choosenFolderData"></select>

[Andrew Vickers]

<!-- Mails grid -->

<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>




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());

Only use the with binding in places where changing the context actually simplifies the code.  In this case, that is only the table body.  Using it on the entire table means having to escape the select bindings to the root for no good reason.




Using the options binding with value specified means that the chosenFolderId observable will be kept up to date.  It is then possible to subscribe to changes in that observable in order to trigger the fetch request for new data from the server.

[asds]

Thanks for the information. One question. How can I access to a specific row in a specific column to manipulate the  value??

For Example I have a table with several rows of data and I want to update the value on row 5 and column:    Column : data-bind="text: from"

The other values should have the same values as before.

[asds]

Another question. 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(test);
        });

I tried to fill the table. But its not possible. How can I do that??

Is it possible to create more rows without the foreach binding???