Knockout Mapping插件和简单JSON中的数据绑定

时间:2013-10-03 08:59:11

标签: json data-binding knockout.js knockout-mapping-plugin

我在弄清楚为什么这个简单的Knockout映射不起作用时遇到了一些问题。我不确定返回的JSON是否无效,或者我的映射是否错误,或者它只是绑定。

数据结构是父 Conversation 对象,其中包含 Message 对象数组。

关于绑定我正在使用foreach:目前正在进行对话,因为如果我将整个事物包装成单个元素数组,我就会有效。

我的绑定                  

<div data-bind="foreach: conversation">
  <div data-bind="foreach: messages">
    <div class="well"> 
      <div data-bind="text: sender_name"></div> 
      <div data-bind="text: subject"></div>
      <div data-bind="text: body"></div>
      <div data-bind="text: updated_at"></div> 
    </div>    
  </div>
</div>  

我的ViewModel,假冒JSON和映射

// Sample JSON to return for initialization; 2 second delay

var conversationData = {
  json: $.toJSON(
        {"id":8,"subject":"Hello JB! Email two!",
         "updated_at":"Sep 27",
         "originator":"James Pablo",
         "count_messages":"(2)",
         "messages":[{"subject":"RE: Hello JB! Email two!",
                      "body":"Thanks for the message!",
                      "sender_name":"Joe Flynn","updated_at":"Sep 27"},
                     {"subject":"Hello JB! Email two!",
                      "body":"Body text",
                      "sender_name":"James Pablo",
                      "updated_at":"Sep 27"}
                    ]
        }
  ),
  delay: 1
}



function Conversation(data) {
    ko.mapping.fromJS(data, {}, this);
}

function Message(data) {    
    ko.mapping.fromJS(data, {}, this);
}

var map = {
  create: function(options) {
    return new Conversation(options.data);
  },
  messages: function(options) { 
    return new Message(options.data);
  }
}


var ViewModel = function() {
  var self = this;
  self.conversation = ko.observable();

  // Use JSFiddle echo to simulate an AJAX service
  (function() {
    $.ajax({ url:"/echo/json/", data:conversationData, type:"POST",
             success:function(data)
             {
               // Map the returned JSON to the View Model  
               ko.mapping.fromJS(data, map, self.conversation);
             }
           });
   })();  

   console.log(self.conversation());

};

ko.applyBindings(new ViewModel());
当我返回包含在单个元素数组中的JSON数据时,

This JSFiddle可以正常工作。

如果我从这个JSFiddle中的JSON中移除数组包装器(这是我想要的,因为我只想呈现单个对话),那么我无法让它工作。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

Create函数仅适用于数组。

试试这个

http://jsfiddle.net/C46pU/2/

从地图文字中移除了Convension并执行了

self.conversation(new Conversation(data));