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

そのようなビューにビジネス ロジックを配置しないでください。より良い解決策は、computedオブザーバブルを使用してフィルター処理された配列を作成し、それにバインドすることです。

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 に答える