2

範囲スライダーの値に応じて異なる数のリンゴを表示したい、knockout.jsを使用した簡単なトレーニングケースがあります。スライダーは次のとおりです。

<input data-bind="value: currentAppleCount" type="range" step="1" min="2" max="10"/>

ユーザーがスライダーハンドルを動かすたびに、のような方法を使用して、UIの一部を適切な数のリンゴで再描画する必要がありますrenderApples(appleCount)。

model.currentAppleCount.subscribe（renderApples）を使用する必要がありますか、それともより良いアプローチがあります。これは、このケースは簡単で、knockoutjsのドキュメントには「通常は手動でサブスクリプションを設定する必要はない」と記載されているためです。また、グッドプラクティスの問題として、メソッドは引数としてrenderApples受け取るか、直接監視可能なアクセスを行う必要があります。appleCountmodel.currentAppleCount

編集：

問題は、addメソッドとremoveメソッドを使用してサードパーティのAPIを使用する必要があることです。

4

2 に答える 2

2

を使用しko.computedて、適切な長さの配列を返します。計算されたプロパティは、参照されたオブザーバブルが更新されるたびに再評価されます。

function ViewModel() {
    this.currentAppleCount = ko.observable(2);
    this.apples = ko.computed(function () {
        var currentAppleCount = this.currentAppleCount();
        var apples = [];
        for (var i = 1; i <= currentAppleCount; i++) {
            apples.push(i);
        }
        return apples;
    }, this);
}

ko.applyBindings(new ViewModel());

または、完全な配列のスライスを返すこともできます。このようにして、オブジェクトインスタンスを保持します。

<input data-bind="value: currentAppleCount" type="range" step="1" min="2" max="10"/>
<ul data-bind="foreach: apples">
    <li>Apple #<span data-bind="text: $data"></span></li>
</ul>

http://jsfiddle.net/MizardX/KeHKB/

于 2012-12-09T18:53:19.510 に答える
1

jQueryUIウィジェットなどのサードパーティAPIを使用している場合、サブスクリプションの設定は正しいことのように思われます。

サードパーティのAPIはノックアウトを理解していないため、オブザーバブルの処理方法がわからないと思います。サブスクリプションを設定すると、オブザーバブルから更新された値を取得してAPIに渡す独自のコードを作成できます。

model.currentAppleCount.subscribe(function(newValue) {
  someOtherAPI.UpdateAppleCount(newValue);
});

あなたは正しいです、ドキュメントは言います：

通常、サブスクリプションを手動で設定する必要はないため、初心者はこのセクションをスキップする必要があります

これは、あなたがもはや初心者ではないことを意味します。:)

PSサードパーティのAPIにappleCountの値を更新する機能がある場合は、サードパーティが提供するある種の更新イベントにフックして、そこからオブザーバブルを設定してください。何かのようなもの：

// I'm just making up the OnAppleCountUpdate event.  I have 
// no idea what it might be called in the third party API.
someOtherAPI.OnAppleCountUpdate(function(newValueFromAPI) {
    model.currentAppleCount(newValueFromAPI);
});

これにより、HTML/KO部分とサードパーティのAPIを双方向でバインドできるようになります。

于 2012-12-10T13:25:46.720 に答える