0

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

我正在尝试映射来自服务器的 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数据的每个数组中删除了很多值，这就是我想使用插件的原因，但这是基本结构。

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

在此先感谢您的帮助...

4

1 回答 1

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/

于 2013-02-23T22:10:30.200 回答