【问题标题】:Error mapping JSON to observableArray将 JSON 映射到 observableArray 时出错
【发布时间】:2012-07-24 20:16:51
【问题描述】:

无法将我的 JSON 数据加载到 ko.observableArray 并且不知道原因。

$(document).ready(function(){
    function Region(uid, name) {
        this.uid = ko.observable(uid);
        this.name = ko.observable(name);
    }

    function CompanyViewModel() {
        this.regions = ko.observableArray([]);
    }

    ko.applyBindings(new CompanyViewModel());   

    // Init.
    $.getJSON( '/regions/', 
        function(data){
            if(data.status == 'ok')
            {
                var mappedData = ko.utils.arrayMap(data.regions, function(item) {
                    return new Region(item.uid, item.name);
                });
                CompanyViewModel.regions( mappedData );
            }
        }
    );
});

调试器说:Uncaught TypeError: Object function CompanyViewModel()... has no method 'regions'

我是 Knockout 的新手,肯定有一些明显的错误,但我不知道在哪里。

【问题讨论】:

    标签: javascript json knockout.js


    【解决方案1】:

    还没有测试过,但应该让你明白我的意思,这就是我的做法:

    $(document).ready(function(){
        var Region = function(uid, name) {
            this.uid = ko.observable(uid);
            this.name = ko.observable(name);
        }
    
        var CompanyViewModel = function() {
            this.regions = ko.observableArray([]);
        }
    
        var model = new CompanyViewModel();
        ko.applyBindings(model);   
    
        // Init.
        $.getJSON( '/regions/', 
            function(data){
                if(data.status == 'ok')
                {
                    var mappedData = ko.utils.arrayMap(data.regions, function(item) {
                        return new Region(item.uid, item.name);
                    });
                    model.regions( mappedData );
                }
            }
        );
    });
    

    【讨论】:

    • 谢谢!我希望现在我明白我的错误了。我创建了“匿名”视图模型对象并尝试从模型定义本身调用方法,而不是从对象,对吧?
    • 对,您没有在模型实例上工作。顺便说一句,如果您不打算更改属性(例如 ID),则没有理由将其变为 observable。
    猜你喜欢
    • 2012-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-04
    • 1970-01-01
    • 2015-07-04
    • 1970-01-01
    • 2019-05-27
    相关资源
    最近更新 更多