在 jQM 应用程序中使用 JSON 映射 Knockout.js 时遇到问题

Question

好的，我已经放弃尝试破解它了，请帮助社区：

我正在尝试映射来自服务器的 JSONP 响应以填充此 HTML：

<!-- ko foreach: featConfirm.confirmPages -->
    <div data-role="page" class="featConfirm" data-bind="template: {name: 'featConfirm_tmp'}, attr: {'id': featConfirm.assignPageID($data.position), 'pos': $data.position}" ></div>
<!-- /ko -->

<script type="text/html" id="featConfirm_tmp">
    <div data-role="content">
        <div class="header"><img class="owner-image" src="img/filler.jpg" />
            Did <span class="owner-name" data-bind="text: featConfirm.featOwner.full_name"></span>
        </div>   
    </div>
</script> 

这是 js 设置 - 这是我迄今为止最好的猜测，但显然它不起作用，但它确实创建了适当数量的带有 id 的页面，但是，我无法访问 JSON 数组中其他地方的任何数据：

function master(){
    var self = this;
    self.featConfirm = new function(){
        var self = this;
        /* KO observable used to populate view */
        self.confirmPages = ko.observableArray([]);
        /* AJAX call to server to get confirmable feats */
        self.getFeatsForConfirm = function(){
            jQuery.ajax({
                                url: sourcesURL + 'myPHP.php',
                                type: 'POST',
                                dataType: 'jsonp',
                                jsonp: 'jsoncallback',
                                success: function(bData, textStatus, jqXHR){

                                /* this is my best guess so far but obviously it does not work however it does create the proper number of pages with id's I can't access any data from elsewhere in the JSON array */
                                for (i=0;i<bData.length;i++){
                                    var a = {position: i+1, data: ko.mapping.fromJSON(bData[i])};
                                    self.confirmPages.push(a);
                                    }
                                    },
                                error:  function(jqXHR, textStatus, errorThrown){
                                    console.log('There was an error submitting your request');
                                    }
                                });
            };
        }
    }
/* init Knockout */ 
ko.applyBindings(master());

我的 JSON 是这样输入的：

([
  {
    "featDetails":{"attempt":"39","owner":"2"},
    "featSpecs":{"id":"1347387875","name":"Eat a tomato"},
    "featOwner":{"full_name":"Darth Freakin Vader"}
  },
  {
    "featDetails":{"attempt":"44","owner":"1"},
    "featSpecs":{"id":"1352986771","name":"Drink Coffee"},
    "featOwner":{"full_name":"Luke Sywalker"}
  }
])

我显然从根本上误解了映射插件的工作原理，这就是我求助于你的原因。我已经从 JSON 数据的每个数组中删除了 ALOT 值，这就是我想使用该插件的原因，但这是基本结构。

• 这种方式可以用映射插件映射JSONP吗，
• 我在这里没有得到什么，
• 如何正确映射这些数据，以便可以在 HTML 中访问它。

提前感谢您的帮助...

Answer 1

是的，可以将 JSONP 与映射插件一起使用（KO 和映射插件不关心数据来自何处）。您的代码的主要问题似乎是您没有注意 KO 范围/绑定上下文的嵌套。

foreach 为每个项目创建一个嵌套范围（上下文项目将只是数组中的当前项目），因此在嵌套上下文中引用 featConfirm 没有意义 - 您需要引用与 $parent/$root 的父/根绑定（例如 $root.featConfirm.assignPageID）或引用实际上在嵌套范围内的事物（例如 featOwner.full_name 而不是 featConfirm.featOwner.full_name）。

对于模板绑定，您没有指定任何 data，因此它没有创建嵌套范围，但由于您正在创建包装数据的对象 (var a)，您可能想要为模板绑定指定data：data-bind="template: {name: 'featConfirm_tmp', data: $data.data}，这将创建另一个嵌套范围。

最后，由于您在成功回调中迭代 bData，并且这是一个 JS 对象（jQuery 已经为您解析了 JSON），所以您需要使用 fromJS 而不是 fromJSON。

这是一个有效的 jsfiddle，这些更改已经到位（我稍微更改了 ajax 以使用 jsfiddle 模拟服务器响应，但您的 jsonp ajax 选项很好）：http://jsfiddle.net/antishok/592q9/3/