javascript - 如何使用两个不同的可观察数组淘汰赛

Question

我想做的是，从我的 ajax 调用中获取第一个结果并将其放入.portfolio--activediv 中，然后从 ajax 结果中删除第一项，然后循环遍历.portfolio--active.

循环工作完美。我遇到的问题是.portfolio--active. 我只是不明白在没有循环或以某种方式引用函数名称的情况下我是如何输出数据的。例如：<ul data-bind="foreach: items">冷藏箱到这个：hutber.portfolio.ko.self.items = ko.observableArray([]);没有它在 al

标记

     <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

您可以[0]在绑定中引用数组的索引，但在您的情况下，您似乎应该headline只创建一个 observable 并执行info.shift()删除并返回数组中的第一项以设置headline. 然后，您可以将项目设置为info不进行任何切片。

    $.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)
    });