2

以下の例は、Json を使用して取り込まれる監視可能な配列を示しています。これにより、「タイプ」に基づいて結果を 2 つのリストにフィルター処理できます。

ajax 呼び出しからまったく同じ Json をロードしようとするまで、これはすべて正常に機能します。

奇妙なことは、スクリプトにアラートを入れると、正常に動作することです...

http://jsfiddle.net/spdKE/3/

<h2>Brand</h2>
<ul id="list-dimensions" data-bind="foreach: filteredDimensions('BRAND')">
    <li>
        <div class="item">ID</div> <span data-bind="text: $data.id"</span>
    </li>
</ul>
<h2>Area</h2>
<ul id="list-dimensions" data-bind="foreach: filteredDimensions('AREA')">
    <li>
        <div class="item">ID</div> <span data-bind="text: $data.id"</span>
    </li>
</ul>​

function ProductDimensionsViewModel () {
        var self = this;
        self.dimensions = ko.observableArray();

        var baseUri = 'api/product_dimensions.php';


        /*$.getJSON(baseUri, function(data){
            success: self.dimensions = data;
        });*/

        $.ajax({
            type: 'GET',
            url: baseUri,
            data: {},
            context: this,
            success: function(data) {
                self.dimensions = data
            },
            dataType: 'json'
        });


        self.filteredDimensions = function(type) {
        return $.map(self.dimensions, function(dimension) {
                if (dimension.type == type) {
                    return dimension;
                }
            });
        }

    }





        ko.applyBindings(new ProductDimensionsViewModel());
4

1 に答える 1

7

変数を更新するのではなく、置き換えています。

...
success: function(data) {
  self.dimensions = data
},
...

Observable は次のように更新されます。

...
success: function(data) {
  self.dimensions(data)
},
...

filteredDimensions('AREA')ページがレンダリングされるとすぐに呼び出されるため、私は使用しません。オブザーバブルを使用し、変数に値を格納してcurrentFilterから、テンプレートを介して適切なビューをロードします。また、フィルタが 2 つしかない場合は、メソッドfilterByAreaとfilterByBrand.

編集: 例を追加: http://jsfiddle.net/jjperezaguinaga/spdKE/4/

于 2013-01-04T20:20:35.600 に答える