0

我真的是新的 knockout.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。欢迎任何建议。

谢谢。

4

1 回答 1

6

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

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

这是他的小提琴。

于 2012-07-31T04:37:24.087 回答