10

私はこの小さなViewModelを持っています:

function BooksViewModel() {
    var self = this;
    self.books = ko.observableArray(library);

    self.findByLanguage = function(lang) {
        self.books = ko.computed(function() {
            return ko.utils.arrayFilter(library, function(book) { 
                return book.language() === lang; 
            });
        });
    };
}

findByLanguage メソッドは、配列を言語でフィルタリングします。ビューでは、次のように実装しようとしています:

<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage('C')">C</a></li>
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage('Cpp')">C++</a></li>
</ul>

そこから言語パラメーターを呼び出して、関数を再利用しようとしています。しかし、データバインドで括弧付きの関数を渡すと、自動的に呼び出されます。

どうすればこれを達成できますか?

4

3 に答える 3

24

The easiest way to accomplish this would be to wrap this in a function that executes only on click, like:

<li><a tabindex="-1" href="#" data-bind="click: function () {findByLanguage('C')}">

Alternatively, you can use the bind context should do the trick.

<li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind('C')">

Here is an example of the click binding using JS Fiddle (http://jsfiddle.net/uFyaP/1/)

于 2012-11-04T18:00:20.907 に答える
9

ビュー モデルに追加のフィールドを追加する、少し異なるアプローチに興味があるかもしれません。

http://jsfiddle.net/jearles/RN9Dw/

ビューモデルに追加languagesすることで、ノックアウトを使用してメニューをレンダリングでき、clickバインディングはクリックされた言語をハンドラー関数に自動的に渡します。selectedLanguageさらに、オブザーバブルとして追加するとbooks、言語を選択またはクリアしたときに計算結果を変更できます。

HTML

<ul class="dropdown-menu" data-bind="foreach: languages">
    <li><a tabindex="-1" href="#" data-bind="text: $data, click: $root.filterByLanguage"></a></li>
</ul>
<button data-bind="click: showAll">Show All</button>

<div data-bind="foreach: books">
    <p><span data-bind="text: name"></span>, <span data-bind="text: language"></span></p>
</div>​

JS

function BooksViewModel() {
    var self = this;

    self.languages = ko.observableArray(['C', 'C++']);
    self.selectedLanguage = ko.observable();
    self.library = [{name: 'Book A', language: 'C'}, {name: 'Book B', language: 'C++'}]; 
    self.books = ko.computed(function() {
        return ko.utils.arrayFilter(self.library, function(book) { 
          return self.selectedLanguage() == null ||
              book.language === self.selectedLanguage(); 
          })
    });

    self.showAll = function() {
        self.selectedLanguage(null);
    }
    self.filterByLanguage = function(lang) {
        self.selectedLanguage(lang);
    };
}

ko.applyBindings(new BooksViewModel());

</p>

于 2012-11-04T18:29:56.120 に答える
3

質問が古いことは知っていますが、誰かが興味を持っている場合、docsによると、最初のパラメーターはviewModelである必要があり、期待どおりに機能します。

<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind($data, 'C')">C</a></li>
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind($data, 'Cpp')">C++</a></li>
</ul>
于 2014-07-24T08:58:31.363 に答える