Question

我真的是新的淘汰赛.js。我想要实现的是限制foreach项目。这是我的来源：

<div data-bind="foreach: news">
      <!-- ko if: catId === '4' -->
            <div  class="news-item">
                <a data-bind="attr: { href: url, title: title }">
                   <div class="news-header-text" data-bind="text: title"></div>
                 </a>
                 <div class="news-date" data-bind="text: date" /></div>

            </div>
      <!-- /ko -->
</div>

这是我的javascript：

 (function()
        { // Wrap in function to prevent accidental globals
            if(location.protocol != "data:")
            {
                $(window).bind('hashchange', function()
                {
                    window.parent.handleChildIframeUrlChange(location.hash)
                });
            }

            // Class to represent a row in the seat reservations grid
            function cebesEnNewsIndex(title, date, url, catId, hits)
            {
                var self = this;
                self.title = title;
                self.date = date;
                self.url = url;
                self.catId = catId;
                self.hits = hits;
            }

            // Overall viewmodel for this screen, along with initial state
            function cebesEnNewsIndexViewModel()
            {
                var self = this;


                // Non-editable catalog data - would come from the server

                // Editable data
                self.news = ko.observableArray([
                new cebesEnNewsIndex("Welcome to Cebes Enterprise", "18 Mey 2012", "#", '4', '20'),
                new cebesEnNewsIndex("Groove for Dummies", "20 Mey 2012", "#", "4", "21"),
                new cebesEnNewsIndex("New Features of Cebes Framework", "18 Mey 2012", "#", "3", "19"),
                new cebesEnNewsIndex("Welcome to Cebes Enterprise", "20 Mey 2012", "#", "3", "24"),
                new cebesEnNewsIndex("Welcome to Cebes Enterprise sdfadfa", "18 Mey 2012", "#", '4', '20'),
                new cebesEnNewsIndex("Groove for Dummiessdfadf", "20 Mey 2012", "#", "4", "21"),
                new cebesEnNewsIndex("New Features of Cebes Frameworksdfad", "18 Mey 2012", "#", "3", "19"),
                new cebesEnNewsIndex("Welcome to Cebes Enterprisdfadfe", "20 Mey 2012", "#", "3", "24"),
                new cebesEnNewsIndex("Welcome to Cebes Enterprissdfadfe", "18 Mey 2012", "#", '4', '20'),
                new cebesEnNewsIndex("Groove for Dummiesdfads", "20 Mey 2012", "#", "4", "21"),
                new cebesEnNewsIndex("New Features of Cebes Framework", "18 Mey 2012", "#", "3", "19"),
                new cebesEnNewsIndex("Welcome to Cebesasdfa Enterprise", "20 Mey 2012", "#", "3", "24"),
                new cebesEnNewsIndex("Welcome to Cebessdfad Enterprise", "18 Mey 2012", "#", '4', '20'),
                new cebesEnNewsIndex("Groove fsdfaor Dummies", "20 Mey 2012", "#", "4", "21"),
                new cebesEnNewsIndex("New Featuresadfas of Cebes Framework", "18 Mey 2012", "#", "3", "19"),
                new cebesEnNewsIndex("Welcome tosdfad Cebes Enterprise", "20 Mey 2012", "#", "3", "24"),
                new cebesEnNewsIndex("New Emsfadfployee", "22 Mey 2012", "#", "5", "25")
                ]);


            }


            ko.applyBindings(new cebesEnNewsIndexViewModel());
        })();

正如你在小提琴手上看到的那样，过滤工作并显示8个新闻项目

我想限制数量并根据具有相同数据的日期项目对数字进行排序（仅显示3个已过滤和排序的新闻项目）：

http://jsfiddle.net/2Ffqn/

这里是我脚本的jsfiddle链接：http://jsfiddle.net/StRa6/ 保持简单，请编辑并保存我的jsfiddle。任何建议都是受欢迎的。

感谢。

Answer 1

您不应该在视图中放置业务逻辑。一个更好的解决方案是使用computed observable创建一个过滤的数组，并绑定到该数组。

self.selectedNews = ko.computed(function() {
    return ko.utils.arrayFilter(self.news(), function(i) {
         return i.catId == 4; //Or, you know, whatever
       })
    });

这是t he fiddle。

限制和排序knockout.js foreach项目

1 个答案: