Knockout JS Ajax调用不填充可观察数组

时间:2013-01-04 19:39:28

标签: knockout.js knockout-2.0

以下示例显示了使用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());

1 个答案:

答案 0 :(得分:7)

您正在替换变量,而不是更新变量:

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

Observable以这种方式更新:

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

我不会使用filteredDimensions('AREA'),因为只要您的网页呈现就会收到调用。使用observables,存储在变量currentFilter中的值,然后通过模板加载正确的视图。此外,如果您只有两个过滤器,更好的方法就是有两种方法:filterByAreafilterByBrand

编辑:添加了示例:http://jsfiddle.net/jjperezaguinaga/spdKE/4/