how to use two different observable arrays knockout

Question

What i am trying to do is, from my ajax call get the first result and put it into the .portfolio--active div and then remove this first item from the ajax results then loop through the rest of the items in the .portfolio--active .

The looping is working perfectly. The problem I am having is with the .portfolio--active . I just don't understand how i am meant to output data without it being in a loop or someway of referencing the function name. for example: <ul data-bind="foreach: items"> reefers to this: hutber.portfolio.ko.self.items = ko.observableArray([]); without it being in al

Markup

     <section>
    <h2>portfolio</h2>
    <div class="portfolio--active">
        <!--<img alt="" src="/img/clients/vw.jpg">-->
        <img alt="" data-bind="attr: {src: '/img/clients/' + headline.id+'.jpg'}">
        <h3><a href="#">Volkswagen.co.uk</a></h3>
        <date>Febuary, 2012 - <a href="#">Zone Ltd.</a></date>
        <p>Lorem text</p>
        <tags><i title="jQuery" class="icon-rss upsideLeft"></i><i title="jQuery" class="icon-html5 upsideLeft"></i></tags>
    </div>
    <div class="portfolio--options">
        <ul data-bind="foreach: items">
            <li data-bind="attr: {'data-id': $data.id}">
                <img alt="" data-bind="attr: {src: '/img/clients/' + $data.id+'.jpg'}">
                <h4 data-bind="text: title"></h4>
            </li>
        </ul>
    </div>
</section>

JS

hutber.portfolio.ko = {
    init: function(){
        ko.applyBindings(new hutber.portfolio.ko.portfolioViewModel());
    },
    portfolioViewModel: function(){
        hutber.portfolio.ko.self = this;

        hutber.portfolio.ko.self.items = ko.observableArray([]);
        hutber.portfolio.ko.self.headline = ko.observableArray([]);

        $.getJSON('/portfolio/json').done(function(info){

            //build headline item
            hutber.portfolio.ko.self.headline(info.slice(0,1));

            //remove first item in array only leave none headline items
            info = info.slice(1,info.length);

            //update items with updated info
            hutber.portfolio.ko.self.items(info)
        });
    }
};

Answer 1

You can reference the [0] index of the array in your bindings, but in your case it seems like maybe you should make headline just an observable and just do an info.shift() to remove and return the first item in the array to set the value of headline . Then, you can just set items as info without doing any slicing.

    $.getJSON('/portfolio/json').done(function(info){

        //build headline item
        hutber.portfolio.ko.self.headline(info.shift());

        //update items with updated info
        hutber.portfolio.ko.self.items(info)
    });